也曾年轻 发表于 2026-3-31 19:43

画蛇添足的队伍,再添一员猛将

<meta charset="utf-8">
<meta name="referrer" content="never" />
<style>
:root        {--w:810px;}
#pichold img        {width:100%;}
#pichold        {position:absolute; width:var(--w);top:0px;animation: mup 200s infinite;}       
#pichold:hover        {animation-play-state:paused;}
#oBlk        {position:relative; width:var(--w);height:1000px;overflow:hidden;margin:auto;box-shadow:4px 4px 10px black;}
@keyframes        mup        {to {top:-14811px;}}
#nav        {position:relative;width:100px;display: grid;place-items:center;}
#pBlk        {
        width:calc(var(--w) + 90px);margin:auto;        display: grid;
                place-items:center;position:relative;
                grid-template-rows: 100%;
                grid-template-columns:var(--w) 90px;
        }
#nav span        {cursor:pointer;margin:32px;font-size:4em;}
</style>
<div id="pBlk">
        <div id="oBlk">
                <div id="pichold">
                        <img src="https://mmbiz.qpic.cn/mmbiz_jpg/nu08FNoHjHBDokQeEuLcNQNbuO8TicFfI8MqAbFyn78aCb2V6wJe74vCORlhEVRAiaRV88uaiaNX1b3xumibvnM7TCvDOXlNia1rhIsXyFKIW7sI/640"/>
                        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/nu08FNoHjHDwYHx9V3BCcCjhZeeE1P0u0mVSMdyk1PmXzWWssIvjSIz5N0XuxM2obsicu7RuNE8jQTmjkNlYnHE673gnUAhYiafU5CzGTBTmg/640"/>
                        <img src="https://mmbiz.qpic.cn/mmbiz_jpg/nu08FNoHjHBDokQeEuLcNQNbuO8TicFfI8MqAbFyn78aCb2V6wJe74vCORlhEVRAiaRV88uaiaNX1b3xumibvnM7TCvDOXlNia1rhIsXyFKIW7sI/640"/>
                </div>
        </div>

                <div id="nav">
                        <span title="加速滚动" id="speedUp">⇧</span>
                        <span title="减速滚动" id="speedDown">⇩</span>
                </div>
</div>
<script>
const aniObj = pichold.getAnimations();
        speedUp.onclick = () =>        {
                        if(aniObj.playbackRate < 5.0)        aniObj.playbackRate += 0.6;
        }
        speedDown.onclick = () =>        {
                        if(aniObj.playbackRate > 0.5)        aniObj.playbackRate -= 0.5;
        }
</script>

樵歌 发表于 2026-3-31 19:53

把画儿自动身上走,这样看挺好的,省得再去翻书了{:4_190:}

也曾年轻 发表于 2026-3-31 20:02

樵歌 发表于 2026-3-31 19:53
把画儿自动身上走,这样看挺好的,省得再去翻书了

谢谢欣赏支持!

樵歌 发表于 2026-3-31 20:49

这个太生猛了,直接上斧子了{:4_189:}

红影 发表于 2026-3-31 21:23

这败家子真是不学无术,古画随意乱添,还能有什么价值。
古人云,富不过三代还真是有道理,不愁吃穿,往往都是养出败家玩意呢。
感谢也曾年轻带来的好帖{:4_187:}

红影 发表于 2026-3-31 21:25

右侧的调速十分好用呢,点向上的箭头就会加速,反之就减速了。
鼠标悬浮还能暂停。这个帖子里的代码厉害了{:4_187:}

霜染枫丹 发表于 2026-3-31 22:36

本帖最后由 霜染枫丹 于 2026-3-31 22:39 编辑

也曾年轻晚上好~不仅内容好,这展示形式也是别具一格,很新颖,而且浏览起来更简单,省去了翻页的麻烦,赞佩!!!{:4_204:}{:4_190:}

也曾年轻 发表于 2026-4-1 07:05

樵歌 发表于 2026-3-31 20:49
这个太生猛了,直接上斧子了

https://img.tuguaishou.com/gif_complete_img/2020-12-07/small_951db7e6d058a381a812f1ae0625bc51.png!w216?auth_key=2281536000-0-0-5967a038ca13f6d70c9dfe0cdf77d4fe

也曾年轻 发表于 2026-4-1 07:06

红影 发表于 2026-3-31 21:23
这败家子真是不学无术,古画随意乱添,还能有什么价值。
古人云,富不过三代还真是有道理,不愁吃穿,往往 ...

https://img0.baidu.com/it/u=20964230,1073667659&fm=253&fmt=auto&app=138&f=GIF?w=240&h=240

也曾年轻 发表于 2026-4-1 07:06

红影 发表于 2026-3-31 21:25
右侧的调速十分好用呢,点向上的箭头就会加速,反之就减速了。
鼠标悬浮还能暂停。这个帖子里的代码厉害了 ...

谢谢欣赏支持!

也曾年轻 发表于 2026-4-1 07:07

霜染枫丹 发表于 2026-3-31 22:36
也曾年轻晚上好~不仅内容好,这展示形式也是别具一格,很新颖,而且浏览起来更简单,省去了翻页的麻烦,赞 ...

谢谢欣赏支持!

红影 发表于 2026-4-1 22:59

也曾年轻 发表于 2026-4-1 07:06
谢谢欣赏支持!

不客气啊,谢谢您带来的好帖{:4_187:}
页: [1]
查看完整版本: 画蛇添足的队伍,再添一员猛将