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中常用的定位方式有普通定位,相对定位,绝对定位、固定定位定位这四种。但是很多零基础的前端小白都不知道这4种定位方式都有什么作用和...
[阅读全文]
-
-
-
-
网友评论