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（循环播放）是动画播放次数
大家可以尝试一下其他的动画效果，你会发现好玩之处。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
