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:

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

    height: 100%;

    left:;

    overflow: hidden;

    position: absolute;

}

.information-mod .line-graph img

{

    left:;

    max-width: none;

    position: absolute;

    top:;

}

.information-mod .information-totle

{

    color: #3589fc;

    font-family: HelveNueThin,'Helvetica Neue',helvetica,sans-serif;

    font-size: 10rem;

    margin:;

}

.information-mod .information-desc

{

    font-size: 3rem;

    margin:;

}

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

    transform: scale(1);

    webkit-transform: scale(1);

}

.information-mod .information-view-list li .info-data-mod:hover .info-data

{

    opacity:;

    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:;

    pointer-events: none;

    position: absolute;

    top:;

    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:;

    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:

20,000,000,000+

621706

传统PC网站已经拥有移动跨屏的云适配版

-->

传统PC网站已经拥有移动跨屏的自适应网站

80%

节省
80%
流量
99.9%

99.9%
同步率
95%

节约
95%
成本
20亿

已适配
20亿
网页
6种

打通
6大
营销入口

巴特西

CSS code snip enjoy.

最新文章

热门文章