本文介绍了一个使用纯CSS实现的背景图片滚动动画效果，并通过JavaScript控制动画的持续滚动。该效果利用了CSS的background-position属性，使背景图片从初始位置逐渐上移直至消失，形成连续的视觉滚动效果。
<html>
<head>
<title></title>
</head>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<style type="text/css">
.background-image{background: url(http://www.rehoming.cn/rehoming/Public/Home/images/mark.png) center center;background-position:0px 46px;width:46px;height:46px;display: block;border: 0;position: absolute;left: 20%;}
</style>
<body>
<span class="background-image mask"></span>
</body>
<script type="text/javascript">
function backgroundPosition(bg) {
x=736;
time1=null;
time1=setInterval(function() {
x=x-46;
$("."+bg).css("background-positionY",x+"px");
if(x<=0){
clearInterval(time1);
backgroundPosition(bg)
}
},100);
};
backgroundPosition('mask');
</script>
</html>720云的图片动画gif（background-positionY定位）
最新推荐文章于 2022-10-23 21:58:00 发布
扫一扫
1586
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
