提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
CSS实现内容旋转向下移动的动画效果
主要用到css的动画
这是css动画的文档,不知道的可以去了解(https://www.runoob.com/cssref/css-animatable.html),废话不多说,直接上代码。
一、HTML代码
<div class=" aa" id="aa">
前端小白
</div>
二、CSS代码
#aa{
width: 100px;
height: 100%;
margin-top: 200px;
margin-left: 500px;
animation:mymove 5s infinite;
-webkit-animation:mymove 6s infinite;
transform:rotate(-90deg);
animation-iteration-count:1;/*执行一次动画*/
}
@keyframes mymove
{
0% {margin-top: 0px;}
100% {margin-top: 200px;}
}
完成,年轻的程序员,大佬勿喷,希望对大家有用,有问题可以留言。