1、html5代碼比較簡單：
<section class="module_change">
<ul>
<li><section>1</section></li>
<li><section>2</section></li>
<li><section>3</section></li>
<li><section>4</section></li>
<li><section>5</section></li>
<li><section>6</section></li>
<li><section>7</section></li>
<li><section>8</section></li>
</ul>
</section>
2、css3代碼：
/*頁面屬性*/
*{
margin:0; /*外邊距*/
padding:0px; /*內邊距*/
}
/*列表項目*/
li{
position:relative; /*位置*/
list-style:none; /*列表樣式*/
float:left; /*浮動位置*/
width:235px; /*寬度*/
height:220px; /*高度*/
margin:10px 0 0 10px; /*外邊距*/
cursor:pointer; /*鼠標指針*/
}
/*容器樣式*/
.module_change{
width:980px; /*寬度*/
margin:0 auto; /*外邊距*/
}
/*內部容器*/
.module_change section {
position:absolute; /*位置*/
background:#ccc; /*背景顏色*/
padding:10px; /*內部邊距*/
text-align:center; /*文字對齊*/
-webkit-animation:module_change .4s ease-in; /*動畫效果*/
-webkit-animation-fill-mode:forwards; /*動畫結束時的狀態：forword代表保持動畫最後一幀的狀態*/
}
/*內部容器鼠標劃過時的效果*/
li section:hover{
background:red; /*背景顏色*/
-webkit-transition:background .3s linear; /*背景動畫*/
}
/*動畫實現的效果*/
@-webkit-keyframes module_change{
0%{width:0px;height:0px;left:50%;top:50%;line-height:0px;opacity:0;}
100%{width:215px;height:200px;left:0%;top:0%;line-height:200px;opacity:1;}
}
在chrome上顯示效果如圖：