目的:
实现落叶的旋转下落效果。
代码如下:
html代码:
css代码:
#yeluobig{position: absolute;top: 29%;left: 30%;
-webkit-animation:luo 8s infinite linear;
animation:luo 8s infinite linear;}
#yeluolit1{position: absolute;top: -2%;left: 40%;
-webkit-animation:luo 8s infinite 2s linear;
animation:luo 8s infinite 2s linear;}
#yeluolit2{position: absolute;top: -2%;left: 50%;
-webkit-animation:luo 8s infinite 4s linear;
animation:luo 8s infinite 4s linear;}
@-webkit-keyframes luo{
0%{top: -1%;transform:rotate(-60deg);}
100%{top: 100%;transform:rotate(60deg);}
}
@keyframes luo{
0%{top: -1%;transform:rotate(-60deg);}
100%{top: 100%;transform:rotate(60deg);}
}
上一篇:利用css怎么对图片进行旋转
下一篇:如何在css3中缩小文字