Css3中关键帧keyframes的用法
在css3中可以使用关键帧keyframes来设置动画,
这个动画你可以根据自己的需要来设置,例如颜色的渐变、位移、缩放、扭曲等等。
下面我为大家准备了用关键帧设置的颜色渐变效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Css3中关键帧keyframes的用法</title>
</head>
<style>
.box{
width: 200px;
height:200px;
margin: 200px auto;
animation: move 3s linear infinite;
}
@keyframes move{
0%{
background: #3B90C5;
}
25%{
background:#DF7137;
}
50%{
background:#74DDE9;
}
75%{
background:#DF7137;
}
100%{
background: #3B90C5;
}
}
</style>
<body>
<div class="box"></div>
</body>
</html>
注意:设置好动画之后,记得要调用函数,不调用函数的话,动画就不起效果。
Animation常用于调用函数:animation: move 3s linear infinite;
move是动画的名称,3s是动画播放的时间,linear(匀速)是动画播放方式,infinite(循环播放)是动画播放次数
大家可以尝试一下其他的动画效果,你会发现好玩之处。