百度元宵节动画

<!DOCTYPE html>            
<html>            
<head>            
    <meta charset="UTF-8">            
    <title>百度元宵节动画</title>         
    <style type="text/css">
        .m-test{ 270px;height: 129px;background: url(https://img-blog.csdn.net/20180302170619180);}
    </style>
</head>            
<body>    
    自制百度元宵节动画
    <div class="m-test" id="m-test"></div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script type="text/javascript">    
        $(function() {
            var positionX = 0;
            setInterval(function() {
                if(positionX > -8640) {
                    positionX = positionX - 270;
                    $('#m-test').css({'background-position': positionX + 'px 0'});
                    if (positionX <= -8640) {
                        positionX = 0;
                    }
                }
            }, 20);
        });
    </script>  
</body>            
</html>
GIF 屏幕录制工具LICEcap https://www.cockos.com/licecap/