练习帖 --- 背景滚动的清明上河图
本帖最后由 夕阳黄昏 于 2026-8-8 08:52 编辑 <br /><br />学习、套用马老师《多图循环平滑移动之background实现方式》代码<style>
:root {
--w:1620px;
--h:600px;
}
#pa {
width: var(--w);
height: var(--h);
position:relative;
background:
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/1.jpg") no-repeat calc(0 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/2.jpg") no-repeat calc(1 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/3.jpg") no-repeat calc(2 * var(--w))0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/4.jpg") no-repeat calc(3 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/5.jpg") no-repeat calc(4 * var(--w))0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/6.jpg") no-repeat calc(5 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/7.jpg") no-repeat calc(6 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/8.jpg") no-repeat calc(7 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/9.jpg") no-repeat calc(8 * var(--w))0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/10.jpg") no-repeat calc(9 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/11.jpg") no-repeat calc(10 * var(--w))0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/12.jpg") no-repeat calc(11 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/1.jpg")no-repeat calc(12 * var(--w)) 0/cover;
animation: bgmove 160s linear infinite ;
box-shadow: 6px 6px 12px black;
margin: 32px auto 40px calc(50% - (var(--w) / 2 + 81px));
&:hover { animation-play-state: paused; }
}
@keyframes bgmove {
to { background-position: calc(-12 * var(--w)) 0, calc(-11 * var(--w)) 0, calc(-10 * var(--w)) 0, calc(-9 * var(--w)) 0,
calc(-8 * var(--w)) 0, calc(-7 * var(--w)) 0, calc(-6 * var(--w)) 0, calc(-5 * var(--w)) 0,
calc(-4 * var(--w)) 0, calc(-3 * var(--w)) 0, calc(-2 * var(--w)) 0, calc(-1 * var(--w)) 0, calc(-0 * var(--w)) 0;
}
}
</style>
<div id="pa"></div>
<audio src="https://upfile.mp3.wf/view.php/60cd00178a8e001f5d8d1f96fa8f9e9b.mp4" loop autoplay />
本帖最后由 夕阳黄昏 于 2026-8-8 08:52 编辑
<style>
:root {
--w:1620px;
--h:600px;
}
#blk {
width: var(--w);
height: var(--h);
position:relative;
background:
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/1.jpg") no-repeat calc(0 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/2.jpg") no-repeat calc(1 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/3.jpg") no-repeat calc(2 * var(--w))0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/4.jpg") no-repeat calc(3 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/5.jpg") no-repeat calc(4 * var(--w))0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/6.jpg") no-repeat calc(5 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/7.jpg") no-repeat calc(6 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/8.jpg") no-repeat calc(7 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/9.jpg") no-repeat calc(8 * var(--w))0/cover，
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/10.jpg") no-repeat calc(9 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/11.jpg") no-repeat calc(10 * var(--w))0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/12.jpg") no-repeat calc(11 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/1.jpg")no-repeat calc(12 * var(--w)) 0/cover;
animation: bgmove 160s linear infinite ;
box-shadow: 6px 6px 12px black;
margin: 32px auto 40px calc(50% - (var(--w) / 2 + 81px));
&:hover { animation-play-state: paused; }
}
@keyframes bgmove {
to { background-position:
calc(-12 * var(--w)) 0, calc(-11 * var(--w)) 0, calc(-10 * var(--w)) 0,
calc(-9 * var(--w)) 0, calc(-8 * var(--w)) 0, calc(-7 * var(--w)) 0,
calc(-6 * var(--w)) 0, calc(-5 * var(--w)) 0, calc(-4 * var(--w)) 0,
calc(-3 * var(--w)) 0, calc(-2 * var(--w)) 0, calc(-1 * var(--w)) 0, calc(-0 * var(--w)) 0;
}
}
</style>
<div id="blk"></div>
<audio src="https://upfile.mp3.wf/view.php/60cd00178a8e001f5d8d1f96fa8f9e9b.mp4" loop autoplay/>
黄昏老师，这是清明上河图的全卷了！壮观！{:4_187:} 本帖最后由 梦江南 于 2026-8-8 10:00 编辑
老师用了12张图片移动毫无痕迹，代码还这么简洁。学习了！{:4_199:} 这样的比例，还有这么多张，这幅图图真大啊。
图上衔接处一闪一闪的细条不知怎么出来的。把宽高用--w --h 来代替，这样好，看着清爽。{:4_199:} 老师的--w:1620px;是怎么来的？ 每次看到这幅千古名图都让人震撼。欣赏夕阳黄昏老师好帖{:4_199:} 红影 发表于 2026-8-8 09:47
这样的比例，还有这么多张，这幅图图真大啊。
图上衔接处一闪一闪的细条不知怎么出来的。把宽高用--w --h...
这些图片还是从你的帖子借用来的，谢谢！ 梦江南 发表于 2026-8-8 09:47
老师的--w:1620px;是怎么来的？
这些图片的原始尺寸是1080x400 ，放大1.5倍 就得到 1620x600 红影 发表于 2026-8-8 09:47
每次看到这幅千古名图都让人震撼。欣赏夕阳黄昏老师好帖
谢谢欣赏支持！ 上午好！ 夕阳黄昏 发表于 2026-8-8 09:58
这些图片的原始尺寸是1080x400 ，放大1.5倍 就得到 1620x600
如果图片尺寸是500X687，也要放大1.5倍吗？ 梦江南 发表于 2026-8-8 10:04
如果图片尺寸是500X687，也要放大1.5倍吗？
放大或缩小由自己决定，原来图片我觉得有点小就放大一点。 夕阳黄昏 发表于 2026-8-8 10:33
放大或缩小由自己决定，原来图片我觉得有点小就放大一点。
你的意思，这个尺寸就是只有一张图片的尺寸。 梦江南 发表于 2026-8-8 10:37
你的意思，这个尺寸就是只有一张图片的尺寸。
是一张图片的尺寸也是画面的尺寸。
不知我理解得对不对， 这方法要求所有图片尺寸一致并且图片尺寸就等于画面尺寸。 效果漂亮，谢谢夕阳老师精彩分享{:4_180:} 杨帆 发表于 2026-8-8 13:05
效果漂亮，谢谢夕阳老师精彩分享
谢谢欣赏支持！ 下午好！ 夕阳黄昏 发表于 2026-8-8 13:22
谢谢欣赏支持！ 下午好！
好久未见，祝夕阳老师安康快乐{:4_190:} 漂亮，赞！ 马黑黑 发表于 2026-8-8 13:25
漂亮，赞！
谢谢你的代码！
正好还有个问题要请教下：图片高度增加而改变了原图尺寸的比例画面就乱套了，例如这帖的图片原始尺寸是1080x400，帖子把它们放大了1.5倍 1620x600 ,如果加高一点如 1620x610 画面就乱了，不知是何原因， 求指点。 杨帆 发表于 2026-8-8 13:24
好久未见，祝夕阳老师安康快乐
立秋到，秋风送爽，愿你心情舒畅，健康平安，收获满满。
页:
[1]
2