css3动画(二)
程序员文章站
2022-03-18 20:09:51
...
帧动画
<style>
.block{
width:100px;
height:100px;
border:1px solid red;
animation:animateData 2s linear;
animation-delay:1s;//延时
animation-play-state:running;//正在执行的动画
animation-timing-function:linear;//运动的方式
animation-iteration-count:infinite;//播放的次数 循环播放/n次
animation-duration:2s;//动画执行时间
animation-direction:alternate;//下一周期是否逆向播放，默认normal
}
//动画的执行方式
@keyframes animateData{
//两种写法
from{
height:0px;
}
to{
height:200px;
}
0%{}
20%{}
50%{}
100%{}
}
</style>
补充：
infinite：循环
reverse：动画反向播放
alternate：奇数次正向播放，偶数次反向播放
alternate-reverse：奇数次反向播放，偶数次正向
normal：默认正向播
paused：暂停
linear-gradient（）颜色渐变
弹球实例：
<head>
<style>
.block{
width:100px;
height:100px;
border-radius:50%;
background:linear-gradient(180deg.pink,blue);
margin:0 auto;
animation:animatetan 1s ease-in infinite alternate;
}
@keyframes animatetan{
0%{margin-top:0px;}
40%{margin-top:600px;}
50%{margin-top:300px;}
60%{margin-top:600px;}
70%{margin-top:450px;}
80%{margin-top:600px;}
90%{margin-top:550px;}
1000%{margin-top:600px;}
}
</style>
</head>
<body>
<div class="block"></div>
</body>
上一篇： 韩剧tv中如何把视频投屏到电视?
下一篇： 平板电脑分类大全详细介绍