zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    标准MIDI文件格式
    David's MIDI Spec
    国庆长假好读书
    vim用法
    ,非你莫属,
    子宫的满足,睡觉前,
    在哪里,
    黑条,
    下单 返回的字段,
    机会啊,游戏啊,转吧,
  • 原文地址:https://www.cnblogs.com/liuqingxia/p/9778032.html
Copyright © 2011-2022 走看看