CSS3 元素水平运动和背景色切换动画效果
分类：实例代码
下面分享一段代码实例，它利用CSS3的animation动画实现了div元素的水平运动效果，当然也可以垂直运动，在运动期间，元素的背景颜色会不断的发生切换。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
div{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: red;
position: relative;
/*创建一个动画
anim：动画的名称
5s：动画的播放时间
infinite alernate：动画播放完成后回过头播放原动画，类似于Cocos中的resever动作*/
animation: anim 5s infinite alternate;
}
/*设置各个阶段的状态*/
@keyframes anim {
0%{
background-color: red;
left: 0px;
top: 0px;
}
25%{
background-color: blue;
left: 200px;
top: 0px;
}
50%{
background-color: #ccffcc;
left: 200px;
top: 200px;
}
75%{
background-color: cyan;
left: 0px;
top: 200px;
}
100%{
background-color: red;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<div>前端教程网</div>
</body>
</html>
相关阅读:
（1）.animation参阅CSS3 animation一章节。
（2）.@keyframes参阅CSS3 @keyframes一章节。
CSS3 元素水平运动和背景色切换动画效果，这样的场景在实际项目中还是用的比较多的，关于CSS3 元素水平运动和背景色切换动画效果就介绍到这了。
CSS3 元素水平运动和背景色切换动画效果属于前端实例代码，有关更多实例代码大家可以查看。