CSS-点赞爱心小动画

爱心图片：

 

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #xin{
                display: block;
                width:100px;
                height: 100px;
                background-image: url(images/web_heart_animation.png);
                background-repeat: no-repeat;
                background-color: pink;
                background-size: 2900%;   //爱心图片的像素大小为2900*100
            }
            .xin2{
                animation: mymoveOK .8s linear;
                animation-fill-mode: forwards;    //动画结束时固定在最后一帧
                animation-timing-function: steps(28);     //非常重要的属性  没有TA，动画就no OK
            }
            @keyframes mymoveOK{
                from{background-position: left;}
                to{background-position: right;}
            }
        </style>
    </head>
    <body>
        <div class="dianzanXin">
            <div id="xin"></div>
        </div>
        <script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
        <script>
            $("#xin").on("click",function(){
                $(this).addClass("xin2")
            })
        </script>
    </body>
</html>

 

posted @ 2018-10-12 14:37  MiniDuck  阅读(2264)  评论(0)  编辑  收藏  举报