【开源宝藏】30天学会CSS - DAY3 第三课 滑动文本+变色

发布于：2025-03-20 ⋅ 阅读:(22) ⋅ 点赞:(0)

以下是一个逐步拆解的中文教程，帮助你理解并复刻这个文字平滑滑动，并在不同背景区域显示不同文字颜色的示例。该示例的核心是：在页面中有两部分背景（左侧红色、右侧浅绿色），同一句文字在水平方向滑动时，进入左侧区域会以浅绿色文字显示，进入右侧区域则以黑色文字（或默认文字颜色）显示，看起来好像文字颜色“变了”。

在这里插入图片描述

第 0 步：项目文件结构

text-color-change/
  ├── index.html
  └── style.css
  • index.html：HTML 结构
  • style.css：CSS 样式，用于设置背景、动画、文字属性等

第 1 步：HTML 结构

在 index.html 中，我们有一个 <section> 包含两部分内容：

  1. 第一段文字（class=“sliding”）直接放在 <section> 里；
  2. 一个名为 <div class="wrapper"> 的容器，里面又放了另一段相同（或相似）的 .sliding 文字；
  3. 整个 <section> 的背景是浅绿色，.wrapper 的背景是红色 + 指定文字颜色为浅绿色，这样当文字移动到 .wrapper 区域时，就会自动变成浅绿色文字；而当文字在右侧（非 .wrapper）区域时，则使用默认的文字颜色（黑色或你想要的颜色）。

示例 index.html（简化注释后）如下：

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例：滑动文本+变色</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
    <!-- 第一行文字：位于 section 里 -->
    <span class="sliding">
        <span>DESAFIO</span>
        <span>30</span>
        <span>DIAS</span>
        <span>CSS</span>
        <span> - </span>
        <span>DESAFIO</span>
        <span>30</span>
        <span>DIAS</span>
        <span>CSS</span>
    </span>

    <!-- 这里放一个 wrapper, 背景红色，文字为浅绿色 -->
    <div class="wrapper">
        <!-- 第二行文字：与上面完全一致，也可自定义不同文字 -->
        <span class="sliding">
            <span>DESAFIO</span>
            <span>30</span>
            <span>DIAS</span>
            <span>CSS</span>
            <span> - </span>
            <span>DESAFIO</span>
            <span>30</span>
            <span>DIAS</span>
            <span>CSS</span>
        </span>
    </div>
</section>
</body>
</html>

主要思路

  • <section> 占据整个视口，背景设为浅绿色 (后续在 CSS 中体现)。
  • <div class="wrapper"> 覆盖了屏幕左半部分，背景红色，文字颜色浅绿色。这意味着只要文字在这个区域内，就自动继承了 wrapper 的 color: #eaffae。
  • 两个 .sliding 元素在水平方向做动画，从左向右（或右向左）移动，文字看起来仿佛连续滚动。

第 2 步：CSS 基础布局

在 style.css 中，先写基础样式，把 <section> 设为整个页面的绝对定位背景，把 .wrapper 定位在左侧 50% 宽度的位置，具体如下：

/* 1) 通用复位 */
body {
    margin: 0;
    padding: 0;
}

/* 2) section：全屏大小，浅绿色背景 */
section {
    width: 100%;
    height: 100%;        
    background: #eaffae;  /* 浅绿色 */
    box-sizing: border-box;
    overflow: hidden;     /* 隐藏可能溢出的文字 */
    position: absolute;
    top: 0; 
    left: 0;
}

/* 3) .wrapper：左侧 50% 区域，红色背景 + 浅绿色文字 */
.wrapper {
    width: 50%;
    height: 100%;
    background: #f55757;  /* 红色 */
    color: #eaffae;       /* 文字为浅绿色 */
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;     /* 同样隐藏溢出的文字 */
    border-right: 2px solid #262626; /* 加条分隔线可视化边界 */
}

分析

  1. section { background: #eaffae }
    • 右侧区域背景即是浅绿色 #eaffae。
  2. .wrapper { background: #f55757; color: #eaffae }
    • 左侧区域是红底 + 浅绿字。当 .sliding 文本进入 .wrapper 时，就会自动套用 .wrapper 的文字颜色 (#eaffae)。
  3. overflow: hidden;
    • 确保那些跑出容器外的文字不会让页面出现滚动条。

第 3 步：设置文字滚动动画

现在看看核心的 .sliding 样式：它把文本放在同一行（white-space: nowrap），字体超大，并用 animation 实现横向平移。代码如下：

.sliding {
    position: absolute;
    top: 50%;               /* 将基准点放在容器垂直正中 */
    white-space: nowrap;    /* 不换行，让一长串文本连续显示 */
    font-size: 12em;        /* 加大字体 */
    line-height: 220px;     /* 行高，令文本保持良好竖直间距 */
    font-family: "Arial Black", sans-serif;
    animation: animate 20s linear infinite; /* 关键帧动画，时长20秒无限循环 */
}

/* 关键帧 animate：从 x = 0% 移动到 x = -50% */
@keyframes animate {
    0% {
        transform: translate(0, -50%);
        /* 说明：这里 y 是 -50%，让文字垂直居中
           x 为 0%，表示初始位置不偏移 */
    }
    100% {
        transform: translate(-50%, -50%);
        /* 20秒后，x移动到 -50%，意味着文本向左移动一半自身长度 */
    }
}

关键点

  1. 水平平移
    • translate(0, -50%) 到 translate(-50%, -50%) 代表x 从 0% 变到 -50%，也就是整个文本块向左移动自身宽度的一半。
    • 你可以把 -50% 改得更大或更小，决定滚动距离多少，甚至改成从右往左或从左往右等。
  2. top: 50% + transform: translateY(-50%)
    • 让 .sliding 在垂直方向居中。
  3. white-space: nowrap
    • 不让文字自动换行，使得一串文字在水平方向持续滚动时看起来更像一个无缝的跑马灯效果。
  4. font-size: 12em;
    • 文字非常大，更能看清“颜色变换”的效果。可自行调小如 5em、8em 等。

第 4 步：文字颜色变化的原理

为什么当文字滑动到 .wrapper 的区域时，文字颜色会变成浅绿色？其本质是CSS 的层级继承：

  • .wrapper { color: #eaffae } 指定了容器内文本的颜色为浅绿色。
  • 当 .sliding 的一部分文字处在 .wrapper 的 DOM 区域（也就是在红色背景那块）时，就继承到了 .wrapper 的文字颜色。
  • 当 .sliding 的另一部分文字超出 .wrapper 范围（在 section 的右半部分）时，则不再继承 .wrapper 的 color，而是使用默认的文字颜色（通常是黑色，或你可以给 section 显式指定一个 color: black;）。
  • 因此，文字看起来就像在不同背景区域时自动变色。

实际上，并非真的“检测”文字位置，而是因为 .sliding 元素在 HTML 结构里部分在 .wrapper 内、部分在 .wrapper 外。随着动画移动，文字段不断“切换”其可见部分在哪个背景区域。于是在视觉上形成“变色”效果。

第 5 步：自定义与扩展

  1. 改变滚动速度或方向
    • 在 animation: animate 20s linear infinite; 中，把 20s 改得更大，滚动会更慢；改更小，滚动更快。
    • 若要从右向左，可将初始 translate(...) 改大一些，如 translate(100%, -50%) 到 translate(-50%, -50%)。
  2. 更多文字或不重复
    • 目前示例把“DESAFIO 30 DIAS CSS”这一串文字重复了两遍，形成一种循环滚动感。如果想只显示一次，可以只写一遍。
  3. 改变背景与文字配色
    • .wrapper 的 background: #f55757; color: #eaffae 和 section 的 background: #eaffae 都可以改成你喜欢的色彩组合，只要保证两边对比明显，才能看出颜色变化。
  4. 文字在中间或上下位置
    • 可以把 top: 50% 改为 top: 30% 或 80%，让滚动文字出现在页面不同的垂直位置。别忘了同时更新 transform: translateY(-30%) 或 (-80%)，以保证文字位置合适。
  5. 显示多行跑马灯
    • 如果想显示多行、每行不同文本，可在 .wrapper 里放多段 .sliding，或将 .sliding 的高度 / line-height 调整为合适的多行布局。

最终效果回顾

  1. 整个页面被一个浅绿色的 <section> 覆盖，左半部分用 .wrapper 改成红色背景、并设文字颜色为浅绿色。
  2. 两条同样的文本在 .sliding 类中，通过 @keyframes animate 进行水平方向的平滑滚动。
  3. 当文本滚动到 .wrapper 的区域时，自动使用了 .wrapper 的 color: #eaffae；当滚动到右侧 <section> 区域时，使用默认的文字颜色（通常是黑色），形成两色切换的视觉效果。

通过这一步步拆解，你应该能够理解：

  • 如何使用绝对定位 + white-space: nowrap 实现文字跑马灯式的连续滚动；
  • 如何用父级元素的 color 来切换文本颜色；
  • 以及如何通过背景与文字对比呈现“进入另一块区域后文字颜色就变了”的效果。

祝你在实际项目中应用得更灵活、有趣！

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布