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

夕阳黄昏

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

夕阳黄昏

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 的位置次序，就能调换滚动方向呢。不过一般看图还是朝左滚动更习惯些。
感谢夕阳黄昏，现在两种滚动方向都知道了