CSS code snip enjoy.

<!-- 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:css

.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;
}

sample:web

20,000,000,000+瀏覽器

傳統PC網站已經擁有移動跨屏的自適應網站框架

80%

節省
80%
流量
99.9%

99.9%
同步率
95%

節約
95%
成本
20億

已適配
20億
網頁
6種

打通
6大
營銷入口