(1) 水平文本滑动器
(1A) HTML
代码语言：html复制<div class="hwrap">
<div class="hmove">
<div class="hslide">剧集是围绕什么？恐慌压倒了保险丝。</div>
<div class="hslide">持久的天文学家平衡着柜台提醒。</div>
<div class="hslide">她的生日计算超过了果汁！</div>
<div class="hslide">最后一张幻灯片。</div>
</div>
</div>(1B) CSS
代码语言：css复制/* (A) 强制所有幻灯片排成单行 */
.hmove { display: flex; }
.hslide { width: 100%; flex-shrink: 0; }
.hwrap { overflow: hidden; }
/* (B) 使用CSS动画切换幻灯片 */
/* (B1) 幻灯片位置 */
.hmove { position: relative; top: 0; right: 0; }
@keyframes slideh {
0% { right: 0; } 24% { right: 0; }
25% { right: 100%; } 49% { right: 100%; }
50% { right: 200%; } 74% { right: 200%; }
75% { right: 300%; } 99% { right: 300%; }
100% { right: 0; }
}
/* (B2) 移动幻灯片 */
.hmove { animation: slideh 12s infinite; }
.hmove:hover { animation-play-state: paused; }(A) 创建两个 <div> 包裹器，将所有幻灯片放在其中。
(A) 基本思路是将幻灯片排成一行。
将内部包裹器设置为弹性布局。
将所有幻灯片设置为100%宽度。
(A) 在外部包裹器上隐藏滚动条，以便“一次显示一张幻灯片”。
(B1) 旋转幻灯片的关键是将内部包裹器设置为相对位置，并相应调整右侧位置。
right: 0 将显示第一张幻灯片。
right: 100% 将显示第二张幻灯片。
right: 200% 将显示第三张幻灯片，依此类推...
(B1) 我们使用一组关键帧“自动”旋转幻灯片。
(B2) 将关键帧附加到内部包裹器，CSS 将完成其余的魔术。
(2) 垂直文本滑动器
(2A) HTML
代码语言：html复制<div class="vwrap">
<div class="vmove">
<div class="vslide">剧集是围绕什么？恐慌压倒了保险丝。</div>
<div class="vslide">持久的天文学家平衡着柜台提醒。</div>
<div class="vslide">她的生日计算超过了果汁！</div>
<div class="vslide">最后一张幻灯片。</div>
</div>
</div>(2B) CSS
代码语言：css复制/* (A) 外部包裹器和幻灯片具有相同尺寸 */
/* 确保足够的高度空间来显示文本！ */
.vwrap,
.vslide { width: 100%; height: 100px; }
.vwrap { overflow: hidden; }
/* (B) 居中文本 */
.vslide {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
/* (C) 使用CSS动画切换幻灯片 */
/* (C1) 幻灯片位置 */
.vmove { position: relative; bottom: 0%; }
@keyframes slidev {
0% { bottom: 0; } 24% { bottom: 0; }
25% { bottom: 100%; } 49% { bottom: 100%; }
50% { bottom: 200%; } 74% { bottom: 200%; }
75% { bottom: 300%; } 99% { bottom: 300%; }
100% { bottom: 0; }
}
/* (C2) 移动幻灯片 */
.vmove { animation: slidev 12s infinite; }
.vmove:hover { animation-play-state: paused; }(A) 设置内部包裹器和幻灯片具有相同的尺寸。
(B) 类似可选，但居中文本会使其看起来更好。
(C1 & C2) 使用相同的相对位置技巧旋转幻灯片，但锚定到底部。
我正在参与2023腾讯技术创作特训营第四期有奖征文，快来和我瓜分大奖！
