27
2017
09

点赞+1效果

html代码:

<body>
    <h1><span>+1</span></h1>
</body>

css代码:

    h1{ font-size: 50px; color: pink; text-align: center; position: relative; }
        span{ font-size: 25px; font-weight: normal; color: #333; position: absolute; top: 0; left: 50%; opacity: 0; }
        .active span{ -webkit-animation:flutter 1.2s ease-in-out; animation:flutter 1.2s 1 ease-in-out; }
        @keyframes flutter{
            0%{ opacity: 0; }
            100%{ opacity: 1; top: -10px; left: 53%; }
        }

js代码:

$("h1").on("click",function(){
        if(!$(this).is(".active")){
            $(this).addClass("active");    
        }

    })

点击过后效果图如下:

这里写图片描述

上一篇:android异常之android.view.WindowLeaked 下一篇:ios基于libcurl发送带附件邮件