CSS中怎么实现多重背景动画-创新互联

CSS中怎么实现多重背景动画,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

创新互联公司主要从事成都网站设计、成都网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务保德,十余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108


CSS代码

给一个页面元素设置多个背景图片,这种技术很早就可行了,你只需要用逗号把各个背景分隔开:



代码如下:

.animate-area {
background-image: url(twitter-logo-bird.png), url(treehouseFrog.png), url(bg-clouds.png);
background-position: 20px -90px, 30px 80px, 0px 0px;
background-repeat: no-repeat, no-repeat, repeat-x;
}


需要注意的是,你希望出现在最上层的背景图应该放在图片队列的第一位。让这些背景图片动起来需要变化background-position,也是用逗号分隔:



代码如下:


@keyframes animatedBird {
from { background-position: 20px 20px, 30px 80px, 0 0; }
to { background-position: 300px -90px, 30px 20px, 100% 0; }
}
.animate-area {
animation: animatedBird 4s linear infinite;
}


看完上述内容,你们掌握CSS中怎么实现多重背景动画的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


分享题目:CSS中怎么实现多重背景动画-创新互联
标题链接:http://scjbc.cn/article/codgoe.html

其他资讯