百度元宵节动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度元宵节动画</title>
<style type="text/css">
.m-test{width: 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/
备注:欢迎加入web前端求职招聘qq群:668352707