css3定义动画事件实现常用网站的移动模块

可以在很多官网上看到"移动的小方块"，今天温习了一遍CSS3样式，发现实现这个效果简直是如鱼得水般简单。

首先定义一个div，里面插入一张图片。

<div class = 'box'>
		<img src="E:/sipits.jpg" width = '175px' height = '131px'></img>
</div>

CSS样式如下：

<style>
		.box{
			width:175px;
			height:131px;
			animation: myfirst 30s infinite;
			animation-direction:alternate;
			position: relative;
		}
		@keyframes myfirst{
			0%{left:0px;top:0px;}
			25%{left:300px;top:450px;}
			50%{left:600px;top:0px;}
			75%{left:900px;top:450px;}
			100%{left:1200px;top:0px;}
		}
</style>

这里用到了@keyframes定义了一个动画事件myfirst,里面包含了一个完整动画的5个进度，也就是移动板块位置的变化。
再进入div中引入动画->animation:myfirst 30s infinite
动画完成时间为30秒
再加入动画完成时逆向进行语句->animation-direction:alternate;

是不是超级简单实用呢！哈哈哈。