CSS-點贊愛心小動畫

本文轉載自查看原文 2018-10-12 14:37 1373 CSS3

愛心圖片：

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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS3——制作圖片翻頁的小動畫 iOS 放大縮小動畫嵌套實現 Vue過渡&循環切換&放大縮小動畫 CSS3點贊動畫特效源碼下載贊！15個來自 CodePen 的酷炫 CSS 動畫效果 html+css一些簡單案例：愛心點擊，盒子模型，2d動畫 Python愛心動畫GIF 關於點贊行為設計··· vue 實現點贊 JavaScript之點贊特效