Bilibili的关注心心动画代码

很好看的哔哩哔哩的关注按钮代码來了,有興趣可以放在自己網站/博客~
代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>模仿Bilibili关注的动画</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    
    <style>
        .bangumi-order-d{
            background: url(http://s1.hdslb.com/bfs/static/bangumi/play/images/anim-order.png);
                display: inline-block;
                position: absolute;
                margin: 60px;
                margin-left: 4px;
                top: -20px;
                width: 60px;
                height: 60px;
                line-height: 28px;
                vertical-align: middle;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <i class="bangumi-order-d" style="background-position: -1860px -60px;"></i>
    <script>
        var w = 0;
        var i = -1;

        $('.bangumi-order-d').click(function(e){ 
            animat($(this),0); 
        })
        function animat($img,w){
            setTimeout(() => {
                $img.css("background-position","-"+ w +"px -60px")
                if(w<1860){
                    w=w+60;
                    animat($img,w);
                }else{
                    w=0
                }
            }, 66);
        }
    </script>
</body>
</html>