文字跳动出现的一个小动画

代码2018-08-241,483 人已阅来源：网络
很久之前做的一个文字跳动出现的小效果，使用了js和css3动画共同完成，作一下备份
直接点击下图进行预览即可。
文字跳动出现的一个小动画
运行代码
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <title>字符跳动出现www.tonjay.com</title>
</head>
<body>
    <style>
        * {margin:0;padding:0;list-style:none;font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;}
.strength {padding:30px 10%;overflow:hidden;background:#fff;margin-top:100px;}
.strength li {width:25%;float:left;position:relative;color:#999;text-align:center;}
.strength li:after {content:"";display:block;position:absolute;top:20%;bottom:20%;right:0;border-right:1px solid #e5e5e5;}
.strength .itemsConut {font-size:48px;color:#3b8dbd;line-height:100%;}
.strength span.name {font-size:16px;color:#999;vertical-align:top;line-height:140%;margin-left:5px;}
.strength p.desc {font-size:16px;margin-top:5px;animation:tonjay 0.6s 1.2s ease forwards;opacity:0;transform:translateX(20px);}
@keyframes tonjay {0% {opacity:0;transform:translateX(20px);}
100% {opacity:1;transform:translateX(0%);}
}
.strength span {display:inline-block;animation:strength 1s 0.5s ease forwards;opacity:0;transform:translateY(200%);}
.strength span:nth-child(1) {animation-delay:0.5s;}
.strength span:nth-child(2) {animation-delay:0.6s;}
.strength span:nth-child(3) {animation-delay:0.7s;}
.strength span:nth-child(4) {animation-delay:0.8s;}
.strength span:nth-child(5) {animation-delay:0.9s;}
.strength span:nth-child(6) {animation-delay:1s;}
.strength span:nth-child(7) {animation-delay:1.1s;}
@keyframes strength {0% {opacity:0;transform:translateY(200%);}
33% {opacity:1;transform:translateY(-10%);}
66% {opacity:1;transform:translateY(5%);}
100% {opacity:1;transform:translateY(0%);}
}
    </style>
    <div class="strength">
        <ul>
            <li>
                <p class="itemsConut">20000+</p>
                <p class="desc">TONJAY.COM已更新文章</p>
            </li>
            <li>
                <p class="itemsConut">300人</p>
                <p class="desc">TONJAY入驻作者</p>
            </li>
            <li>
                <p class="itemsConut">25个</p>
                <p class="desc">TONJAY发布组件模块</p>
            </li>
            <li>
                <p class="itemsConut date"></p>
                <p class="desc">TONJAY已安全运营</p>
            </li>
        </ul>
    </div>
    <script>
        function daysBetween(DateOne, DateTwo) {
            var OneMonth = DateOne.substring(5, DateOne.lastIndexOf('-'));
            var OneDay = DateOne.substring(DateOne.length, DateOne.lastIndexOf('-') + 1);
            var OneYear = DateOne.substring(0, DateOne.indexOf('-'));
            var TwoMonth = DateTwo.substring(5, DateTwo.lastIndexOf('-'));
            var TwoDay = DateTwo.substring(DateTwo.length, DateTwo.lastIndexOf('-') + 1);
            var TwoYear = DateTwo.substring(0, DateTwo.indexOf('-'));
            var cha = ((Date.parse(OneMonth + '/' + OneDay + '/' + OneYear) - Date.parse(TwoMonth + '/' + TwoDay + '/' +
                    TwoYear)) /
                86400000);
            return Math.abs(cha);
        }
        var d = new Date();
        var today = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
        $(".date").text(daysBetween('2015-03-02', today) + '天');
        $(".itemsConut").each(function () {
            var text = $(this).text().trim().split("");
            var a = '';
            $.each(text, function (i, v) {
                a += '<span>' + v + '</span>';
            });
            $(this).html(a);
            $(this).find("span").last().addClass("name");
        })
    </script>
</body>
</html>
AIHX

文字跳动出现的一个小动画

相关内容
