CSS3实例学习3-模块变大

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上显示效果如图：