js 数字滚动

<ul class="number wow fadeInUp" data-wow-delay=".3s">
    {% for value in app('section').id('97550') %}
    <li>
        <h3><i class="counter">{{ value.name }}</i><span>{{ value.fname }}</span></h3>
        <p>{{ value.summary }}</p>
    </li>
    {% endfor %}
</ul>

<script src="//cdn.myxypt.com/assets/jquery.countup.min.js"></script>
<script src="//cdn.myxypt.com/assets/jquery.waypoints.min.js"></script>
<script>
    $('.counter').countUp();
</script>

<style type="text/css">
    /* number */
    .number{display: flex;justify-content: space-between;position: relative;z-index: 999;}
    .number li{border: 1px solid #dcdcdc;border-radius: 5px;position: relative;text-align: center;width: 130px;transition: all 0.8s;-webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;-o-transition: all 0.8s;padding: 20px 0;}
    .number li h3 {color: #0569dc;display: inline-block;}
    .number li h3 i {font-style: inherit;color: #0569dc;font-size: 36px;font-weight: 600;font-family: "Microsoft Yahei";}
    .number li h3 span {font-size: 16px;font-weight: normal;font-style: inherit;color: #0569dc;}
    .number li p {font-size: 18px;line-height: 1.7;color: #0569dc;padding-top: 5px;font-weight: bold;}
</style>