练习帖 --- 背景滚动的清明上河图

夕阳黄昏

学习、套用马老师《多图循环平滑移动之background实现方式》代码

夕阳黄昏

1. <style>
   
2. :root   {
   
3.     --w:1620px;
   
4.     --h:600px;
   
5. }
   
6.     #blk {
   
7.         width: var(--w);
   
8.         height: var(--h);
   
9.         position:relative;
   
10.         background:
    
11. url("https://wj1.zp68.com:812/lxx/yunhua/20191220/1.jpg") no-repeat calc(0 * var(--w)) 0/cover,
    
12. url("https://wj1.zp68.com:812/lxx/yunhua/20191220/2.jpg") no-repeat calc(1 * var(--w)) 0/cover,
    
13. url("https://wj1.zp68.com:812/lxx/yunhua/20191220/3.jpg") no-repeat calc(2 * var(--w))  0/cover,
    
14. url("https://wj1.zp68.com:812/lxx/yunhua/20191220/4.jpg") no-repeat calc(3 * var(--w)) 0/cover,
    
15. url("https://wj1.zp68.com:812/lxx/yunhua/20191220/5.jpg") no-repeat calc(4 * var(--w))  0/cover,
    
16. url("https://wj1.zp68.com:812/lxx/yunhua/20191220/6.jpg") no-repeat calc(5 * var(--w)) 0/cover,
    
17. url("https://wj1.zp68.com:812/lxx/yunhua/20191220/7.jpg") no-repeat calc(6 * var(--w)) 0/cover,
    
18. url("https://wj1.zp68.com:812/lxx/yunhua/20191220/8.jpg") no-repeat calc(7 * var(--w)) 0/cover,
    
19. url("https://wj1.zp68.com:812/lxx/yunhua/20191220/9.jpg") no-repeat calc(8 * var(--w))  0/cover，
    
20. url("https://wj1.zp68.com:812/lxx/yunhua/20191220/10.jpg") no-repeat calc(9 * var(--w)) 0/cover,
    
21. url("https://wj1.zp68.com:812/lxx/yunhua/20191220/11.jpg") no-repeat calc(10 * var(--w))  0/cover,
    
22. url("https://wj1.zp68.com:812/lxx/yunhua/20191220/12.jpg") no-repeat calc(11 * var(--w)) 0/cover,
    
23. url("https://wj1.zp68.com:812/lxx/yunhua/20191220/1.jpg")  no-repeat calc(12 * var(--w)) 0/cover;
    
24.         animation: bgmove 160s linear infinite ;
    
25.                 box-shadow: 6px 6px 12px black;
    
26.                 margin: 32px auto 40px calc(50% - (var(--w) / 2 + 81px));
    
27.         &:hover { animation-play-state: paused; }
    
28.     }
    
29.     @keyframes bgmove {
    
30.         to { background-position:
    
31.         calc(-12 * var(--w)) 0, calc(-11 * var(--w)) 0, calc(-10 * var(--w)) 0,
    
32.         calc(-9 * var(--w)) 0, calc(-8 * var(--w)) 0, calc(-7 * var(--w)) 0,
    
33.         calc(-6 * var(--w)) 0, calc(-5 * var(--w)) 0, calc(-4 * var(--w)) 0,
    
34.         calc(-3 * var(--w)) 0, calc(-2 * var(--w)) 0, calc(-1 * var(--w)) 0, calc(-0 * var(--w)) 0;
    
35.         }
    
36.     }
    
37. </style>
    
38. 
    
39. <div id="blk"></div>
    
40. <audio src="https://upfile.mp3.wf/view.php/60cd00178a8e001f5d8d1f96fa8f9e9b.mp4" loop autoplay  />
    

复制代码

梦江南

黄昏老师，这是清明上河图的全卷了！壮观！

梦江南

老师用了12张图片移动毫无痕迹，代码还这么简洁。学习了！

红影

这样的比例，还有这么多张，这幅图图真大啊。
图上衔接处一闪一闪的细条不知怎么出来的。把宽高用--w --h 来代替，这样好，看着清爽。

梦江南

老师的--w:1620px;是怎么来的？

红影

每次看到这幅千古名图都让人震撼。欣赏夕阳黄昏老师好帖

夕阳黄昏

红影 发表于 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倍吗？