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

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

感觉向右滚动更符合画卷的本意（由郊外到城内）
<style>
:root {
--w:1296px;
--h:480px;
}
#blk {
   width: var(--w);
   height: var(--h);
position:relative;
   background:
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/12.jpg") no-repeat calc(0 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/11.jpg") no-repeat calc(-1 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/10.jpg") no-repeat calc(-2 * var(--w))0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/9.jpg") no-repeat calc(-3 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/8.jpg") no-repeat calc(-4 * var(--w))0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/7.jpg") no-repeat calc(-5 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/6.jpg") no-repeat calc(-6 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/5.jpg") no-repeat calc(-7 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/4.jpg") no-repeat calc(-8 * var(--w))0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/3.jpg") no-repeat calc(-9 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/2.jpg") no-repeat calc(-10 * var(--w))0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/1.jpg") no-repeat calc(-11 * var(--w)) 0/cover,
url("https://wj1.zp68.com:812/lxx/yunhua/20191220/12.jpg")no-repeat calc(-12 * var(--w)) 0/cover;
animation: MtoR 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 MtoR {
   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/>

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

红影发表于 2026-8-8 12:18

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

夕阳黄昏 发表于 2026-8-8 12:29

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

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

夕阳黄昏 发表于 2026-8-8 12:36

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

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

霜染枫丹 发表于 2026-8-8 12:55

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

杨帆发表于 2026-8-8 13:16

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

夕阳黄昏 发表于 2026-8-8 13:19

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

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

夕阳黄昏 发表于 2026-8-8 13:38

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

谢谢欣赏支持！下午好！

霜染枫丹 发表于 2026-8-8 14:29

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

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

梦江南 发表于 2026-8-8 14:36

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

这样像右移动也很好看的。{:4_187:}

霜染枫丹 发表于 2026-8-8 14:38

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

https://imgimg.qqdsw8.cn/view.php/8b588e0a1aada31e342b3e92af2688d8.gif

夕阳黄昏 发表于 2026-8-8 15:25

霜染枫丹发表于 2026-8-8 14:29
可能是我浏览器的原因。我最近不知道动了那里的设置，ps导出来的GIF图片在很暗的地方会出现很密的亮点， ...

这些我真一点都不懂{:5_102:}

夕阳黄昏 发表于 2026-8-8 15:26

梦江南发表于 2026-8-8 14:36
这样像右移动也很好看的。

古画长卷大概是这样的看法{:5_106:}

夕阳黄昏 发表于 2026-8-8 15:29

霜染枫丹发表于 2026-8-8 14:38

这样的闪烁条我这确实没有

夕阳黄昏 发表于 2026-8-8 15:52

本帖最后由夕阳黄昏于 2026-8-8 15:59 编辑 <br /><br />霜染枫丹发表于 2026-8-8 14:38

录了一小段视频上传到彩虹网盘，不知能不能播放
<video src="http://cccimg.com/view.php/1f59ff3fa01855611d3d3dd14ec325bf.mp4" loop autoplay muted width="600" height="400"></video>

霜染枫丹 发表于 2026-8-8 16:03

夕阳黄昏发表于 2026-8-8 15:52
本帖最后由夕阳黄昏于 2026-8-8 15:59 编辑
录了一小段视频上传到彩虹网盘，不知能不能播放

看的很清晰，很平稳顺滑，应该是我这边的问题，哈哈~~我更不懂。{:4_173:}{:4_204:}

霜染枫丹 发表于 2026-8-8 16:24

夕阳黄昏发表于 2026-8-8 15:25
这些我真一点都不懂

我问了一下我儿子，他说是浏览器和显卡不同造成的，代码没问题。是我这边的问题{:4_173:}{:4_190:}

红影发表于 2026-8-9 09:44

夕阳黄昏发表于 2026-8-8 12:29
目的是试试向右滚动，再者从画面上看多数人物是面朝城里的方向，体现“上”的含义，若向左滚动就有离开热 ...

哦哦，还有这说法，倒是没想到呢，光是凭感觉还是不对的{:4_187:}

红影发表于 2026-8-9 09:50

夕阳黄昏发表于 2026-8-8 12:36
网上抄来的一段话

仔细看着图图，感受古人的生活。看到桥上那么多摆摊的。最奇怪看到拉纤的，绳索竟然是系在桅杆顶部，这样不会把船拉翻么{:4_173:}

页: [1] 2

花潮论坛's Archiver

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