多种CSS情况动漫完成方式示例

2021-01-20 09:39 jianzhan


CSS编码

给1个网页页面元素设定好几个情况照片,这类技术性很早便可行了,你只必须用逗号把各个情况隔开开:

拷贝编码
编码以下:
.animate-area {
background-image: url(twitter-logo-bird.png), url(treehouseFrog.png), url(bg-clouds.png);
background-position: 20px ⑼0px, 30px 80px, 0px 0px;
background-repeat: no-repeat, no-repeat, repeat-x;
}

必须留意的是,你期待出現在最顶层的情况图应当放在照片序列的第1位。让这些情况照片动起来必须转变background-position,也是用逗号隔开:

拷贝编码
编码以下:

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

这样做的結果便是3种情况在同1个元素上挪动!

自然,这样完成的其实不是最理想化的实际效果,你没法单独的挪动某个情况照片的部位,它们务必维持同样的速度和不断時间。