本文介绍了一种使用CSS实现的动画效果，通过不同延迟时间来控制多个元素的动画播放顺序，达到一种流畅且有序的视觉体验。
CSS
语言：
CSSSCSS
确定
.big {
width: 400px;
margin: 100px auto;
}
.a {
width: 20px;
height: 200px;
background: blue;
float: left;
margin-left: 20px;
}
.a1 {
animation: donghua1 1s infinite;
animation-delay: 0s;
}
.a2 {
animation: donghua1 1s infinite;
animation-delay: 0.1s;
}
.a3 {
animation: donghua1 1s infinite;
animation-delay: 0.2s;
}
.a4 {
animation: donghua1 1s infinite;
animation-delay: 0.3s;
}
.a5 {
animation: donghua1 1s infinite;
animation-delay: 0.4s;
}
.a6 {
animation: donghua1 1s infinite;
animation-delay: 0.5s;
}
.a7 {
animation: donghua1 1s infinite;
animation-delay: 0.6s;
}
.a8 {
animation: donghua1 1s infinite;
animation-delay: 0.7s;
}
.a9 {
animation: donghua1 1s infinite;
animation-delay: 0.8s;
}
.a10 {
animation: donghua1 1s infinite;
animation-delay: 0.9s;
}
@keyframes donghua1 {
50% {
height: 0px;
margin-top: 100px;
background: rgb(238, 6, 219);
}
}
扫一扫
3100
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
