HTML CSS 中的简单响应式文本滑块

原创

zayyo

发布于 2023-12-17 21:35:56

1070

发布于 2023-12-17 21:35:56

文章被收录于专栏：zayyo前端zayyo前端

(1) 水平文本滑动器

(1A) 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

/* (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

<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

/* (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腾讯技术创作特训营第四期有奖征文，快来和我瓜分大奖！

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2023腾讯·技术创作特训营第四期

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2023腾讯·技术创作特训营第四期

登录后参与评论

0 条评论

热度