css3制作模块变大的效果

<div class="iteye-blog-content-contain" style="font-size: 14px;">
<pre name="code" class="html">&lt;!DOCTYPE HTML&gt;
&lt;html lang="en-US"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;css3制作模块变大的效果&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
        &lt;style type="text/css"&gt;
        *{margin:0;padding:0px;}
    body{background:#b1b1b1;font-family:Arial;font-size:125%;color:#202020;}
    li{position:relative;list-style:none;float:left;width:235px;height:220px;margin:10px 0 0 10px;cursorointer;}
    .tips{width:800px;margin:0 auto;line-height:24px;padding-top:10px;font-size:14px;}
        .bredcolor{color:#fff;}
    .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;
    }
    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;}
    }
        &lt;/style&gt;
        &lt;section class="tips"&gt;
        本效果有多种方法实现:但是最简单的就是在外面套一层。原因:&lt;br&gt;
        css3中大部分的效果是离不开position:absolute的。&lt;br&gt;
        案例中的的效果需要变宽变高，并且是由中间扩散的。&lt;br&gt;
        所以为了统一，我就在外面家了一个框，告诉他，这个是运动的标准。&lt;br&gt;
        接下来就是运用什么属性了！变宽变位置肯定离不开keyframes，当然也可以运用transition。
         &lt;br&gt;&lt;font color=black&gt;▲　目前IE8及以前版本不兼容CSS3，请使用IE9/火狐/Chrome浏览器运行本效果。&lt;br&gt;&lt;hr&gt;&lt;
        &lt;/section&gt;
        &lt;section class="module_change"&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;section&gt;1&lt;/section&gt;&lt;/li&gt;
            &lt;li&gt;&lt;section&gt;2&lt;/section&gt;&lt;/li&gt;
            &lt;li&gt;&lt;section&gt;3&lt;/section&gt;&lt;/li&gt;
            &lt;li&gt;&lt;section&gt;4&lt;/section&gt;&lt;/li&gt;
            &lt;li&gt;&lt;section&gt;5&lt;/section&gt;&lt;/li&gt;
            &lt;li&gt;&lt;section&gt;6&lt;/section&gt;&lt;/li&gt;
            &lt;li&gt;&lt;section&gt;7&lt;/section&gt;&lt;/li&gt;
            &lt;li&gt;&lt;section&gt;8&lt;/section&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/section&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<p> </p>
</div>