CSS code snip enjoy.

浏览数：44 / 时间：2015年06月09日

<!-- information-total得是动态获取吧。 -->
<div class="information-mod">
    <div class="am-container">
        <p id="numRun" class="information-totle">20,000,000,000+</p>
        <!--<P class = ‘information-totle‘>621706</P>
        <p class="information-desc">传统PC网站已经拥有移动跨屏的云适配版</p>-->
        <p class="information-desc">传统PC网站已经拥有移动跨屏的自适应网站</p>
        <div class="am-g">
            <ul class="md-block-grid-5 sm-block-grid-3 information-view-list">
                <li>
                    <div class="info-data-mod">
                        <div class="info-data"><span>80%</span></div>
                        <div class="info-more"><span>节省 <br/><strong>80%</strong> <br/>流量</span></div>
                    </div>
                </li>
                <li>
                    <div class="info-data-mod">
                        <div class="info-data"><span>99.9%</span></div>
                        <div class="info-more"><span><strong>99.9%</strong> <br/>同步率</span></div>
                    </div>
                </li>
                <li>
                    <div class="info-data-mod"><div class="info-data"><span>95%</span></div>
                        <div class="info-more"><span>节约 <br/><strong>95%</strong> <br/>成本</span></div>
                    </div>
                </li>
                <li><div class="info-data-mod">
                    <div class="info-data"><span>20亿</span></div>
                    <div class="info-more"><div class="info-data-mod"><span>已适配 <br/><strong>20亿</strong> <br/>网页</span></div>
                    </div>
                </li>
                <li>
                    <div class="info-data-mod">
                        <div class="info-data"><span>6种</span></div>
                        <div class="info-more"><span>打通 <br/><strong>6大</strong> <br/>营销入口</span></div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="line-graph-mod">
        <div class="line-graph">
            <img src="http://static.amzui.com/assets/images/chart1_06.png" alt=""/>
        </div>
        <div class="line-graph">
            <img src="http://static.amzui.com/assets/images/chart2_06.png" alt=""/>
        </div>
    </div>
</div>


<!-- 介绍 -->
<div class="intro-mod">
    <div class="intro-title">
        <h2>Amaze UI</h2>
        <span>激发强大生产力与创造力，始于前所未见的易用性</span>
    </div>
    <div class="intro-list-wrap am-container">
      
          <div class="intro-list am-g">
              <div class="col-md-6 col-sm-12 intro-img">
                  <img src="http://static.amzui.com/assets/images/intro-img1.png" />
              </div>
              <div class="col-md-6 col-sm-12 intro-text">
                  <h3>本地化支持</h3>
                  <span>相比国外框架，Amaze UI 关注中文排版，根据用户代理调整字体，实现更好的中文排版效果；兼顾国内主流浏览器及 App 内置浏览器兼容支持。</span>
              </div>
          </div>
      
          <div class="intro-list am-g">
              <div class="col-md-6 col-sm-12 intro-img">
                  <img src="http://static.amzui.com/assets/images/intro-img2.png" />
              </div>
              <div class="col-md-6 col-sm-12 intro-text">
                  <h3>组件丰富，模块化</h3>
                  <span>Amaze UI 含近 20 个 CSS 组件、10 个 JS 组件，更有 17 款包含近 60 个主题的 Web 组件，可快速构建界面出色、体验优秀的跨屏页面，大幅提升开发效率。</span>
              </div>
          </div>
      
          <div class="intro-list am-g">
              <div class="col-md-6 col-sm-12 intro-img">
                  <img src="http://static.amzui.com/assets/images/intro-img3.png" />
              </div>
              <div class="col-md-6 col-sm-12 intro-text">
                  <h3>轻量级，高性能</h3>
                  <span>Amaze UI 面向 HTML5 开发，使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让 Web 应用更快速载入。</span>
              </div>
          </div>
      
    </div>
</div>

css defination:

.information-mod
{
    color: #333;
    overflow: hidden;
    padding: 85px 0;
    text-align: center;
}
.information-mod .line-graph-mod
{
    position: relative;
}
.information-mod .line-chart-1
{
    animation: decrease 4s forwards;
    webkit-animation: decrease 4s forwards;
}
.information-mod .line-chart-2
{
    animation: decrease 5s forwards;
    webkit-animation: decrease 5s forwards;
}
.information-mod .line-graph
{
    bottom: 0;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
}
.information-mod .line-graph img
{
    left: 0;
    max-width: none;
    position: absolute;
    top: 0;
}
.information-mod .information-totle
{
    color: #3589fc;
    font-family: HelveNueThin,‘Helvetica Neue‘,helvetica,sans-serif;
    font-size: 10rem;
    margin: 0;
}
.information-mod .information-desc
{
    font-size: 3rem;
    margin: 0;
}
.information-mod .information-view-list
{
    margin: 70px auto 100px;
}
.information-mod .information-view-list li .info-data-mod
{
    display: inline-block;
    height: 122px;
    position: relative;
    width: 122px;
}
.information-mod .information-view-list li .info-data-mod:hover .info-more
{
    opacity: 1;
    transform: scale(1);
    webkit-transform: scale(1);
}
.information-mod .information-view-list li .info-data-mod:hover .info-data
{
    opacity: 0;
    transform: scale(0);
    webkit-transform: scale(0);
}
.information-mod .information-view-list li .info-data,.information-mod .information-view-list li .info-more
{
    backface-visibility: hidden;
    border-radius: 100%;
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    webkit-backface-visibility: hidden;
    width: 100%;
}
.information-mod .information-view-list li .info-data:before,.information-mod .information-view-list li .info-more:before
{
    content: ‘‘;
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.information-mod .information-view-list li .info-data span,.information-mod .information-view-list li .info-more span
{
    display: inline-block;
    vertical-align: middle;
}
.information-mod .information-view-list li .info-data
{
    background: #fff;
    border: 1px solid #ccc;
    font-size: 2.8rem;
    transition: all .6s ease-in-out;
    webkit-transition: all .6s ease-in-out;
}
.information-mod .information-view-list li .info-more
{
    background: #353644;
    color: #fff;
    line-height: 1.5;
    opacity: 0;
    transform: scale(1.5);
    transition: all .4s ease-in-out .2s;
    webkit-transform: scale(1.5);
    webkit-transition: all .4s ease-in-out .2s;
}
.information-mod .information-view-list li .info-more strong
{
    font-size: 2rem;
}