再练习 --- 向右滚动的清明上河图

夕阳黄昏

感觉向右滚动更符合画卷的本意（由郊外到城内）

夕阳黄昏

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

复制代码

红影

只要更换@keyframes 的位置次序，就能调换滚动方向呢。不过一般看图还是朝左滚动更习惯些。
感谢夕阳黄昏，现在两种滚动方向都知道了

夕阳黄昏

红影 发表于 2026-8-8 12:18
只要更换@keyframes 的位置次序，就能调换滚动方向呢。不过一般看图还是朝左滚动更习惯些。
感谢夕阳黄昏 ...

目的是试试向右滚动，再者从画面上看多数人物是面朝城里的方向，体现“上”的含义，若向左滚动就有离开热闹城镇回家去的感觉。

夕阳黄昏

红影 发表于 2026-8-8 12:18
只要更换@keyframes 的位置次序，就能调换滚动方向呢。不过一般看图还是朝左滚动更习惯些。
感谢夕阳黄昏 ...

网上抄来的一段话

清明上河图属于国画中的長卷，又称手卷，横卷，是中国画中一种特有装裱形式，欣赏長卷属阅读式欣赏，一般是将手卷置于案几或長条状桌台上，从右开始一点点观赏到另一头，从右至左的观赏顺序是与古人文字书写和阅读方向一致。 左手将卷一点点的展开，看一段后右手将看过的再卷起，边展开边看边卷起，看完后，从左边卷慢慢卷回，卷好后仍是左边在内右边在外。

霜染枫丹

这样看这幅图，很方便也能看的仔细，我的浏览器看图出现竖式的一条闪烁线，您看看。也可能是我浏览器的问题。感谢您的分享，祝安好！！

杨帆

我这儿看衔接基本无痕，过渡更自然，谢谢夕阳老师精彩示范

夕阳黄昏

霜染枫丹 发表于 2026-8-8 12:55
这样看这幅图，很方便也能看的仔细，我的浏览器看图出现竖式的一条闪烁线，您看看。也可能是我浏览器的问题 ...

我的平板和电脑上都没有闪烁的情况啊。
是不是屏幕刷新频率的原因

夕阳黄昏

杨帆 发表于 2026-8-8 13:16
我这儿看衔接基本无痕，过渡更自然，谢谢夕阳老师精彩示范

谢谢欣赏支持！ 下午好！

霜染枫丹

夕阳黄昏 发表于 2026-8-8 13:19
我的平板和电脑上都没有闪烁的情况啊。
是不是屏幕刷新频率的原因

可能是我浏览器的原因。我最近不知道动了那里的设置，ps导出来的GIF图片在很暗的地方会出现很密的亮点，还没去排查。

梦江南

夕阳黄昏 发表于 2026-8-8 10:27

这样像右移动也很好看的。

霜染枫丹

夕阳黄昏 发表于 2026-8-8 13:19
我的平板和电脑上都没有闪烁的情况啊。
是不是屏幕刷新频率的原因

                               
登录/注册后可看大图