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;

是不是超級簡單實用呢！哈哈哈。