<html>
<head>
<meta charset="UTF-8">
<title>百度元宵节动画</title>
<style type="text/css">
.m-test{width: 270px;height: 129px;background: url(https://file.cfanz.cn/uploads/png/2022/07/01/1/71bPeS3H7d.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=);}
</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/
