正文

CSS-点赞爱心小动画

IP云
IP云V管理员/10 阅读
11/30
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

爱心图片：

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>

相关阅读

目录[+]