百度元宵节动画.m-test{width: 270px;height: 129px;background: url(ht

<!DOCTYPE html>            
<html>            
<head>            
    <meta charset="UTF-8">            
    <title>百度元宵节动画</title>         
    <style type="text/css">
        .m-test{width: 270px;height: 129px;background: url(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a6416047200044dd9df2376fb0293064~tplv-k3u1fbpfcp-zoom-1.image);}
    </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 www.cockos.com/licecap/
\