CSS实现的百看不腻的跑马灯效果，赶紧学起来

2023-10-05 18:17:25

在当今快节奏的数字世界中，吸引和留住网站访问者的注意力变得越来越困难。一种有效的方法是使用引人入胜的视觉元素，例如跑马灯。跑马灯是一种在网站或应用程序中不断滚动的文本或图像带。它们可以用来显示重要信息、促销活动或其他内容。

传统的跑马灯往往非常明亮和闪烁，这可能会让访问者感到厌烦甚至头晕。为了解决这个问题，本文将向您展示如何使用 CSS 实现一个百看不腻的跑马灯效果。该跑马灯不会闪烁，也不会让您的眼睛感到疲劳，非常适合在网站上使用。

实现步骤

要实现这个效果，您需要遵循以下步骤：

首先，您需要创建一个包含跑马灯内容的 HTML 元素。这个元素可以是一个 div、span 或任何其他您喜欢的元素。
然后，您需要为这个元素添加以下 CSS 样式：

{
    position: relative;
    width: 100%;
    height: 50px;
    overflow: hidden;
}

position: relative; 将元素定位为相对位置，以便您可以将子元素绝对定位在其内部。
width: 100%; 和 height: 50px; 设置元素的宽高。您可以根据需要调整这些值。
overflow: hidden; 隐藏元素溢出的内容。

3.接下来，您需要创建另一个包含跑马灯内容的 HTML 元素。这个元素可以是另一个 div、span 或任何其他您喜欢的元素。

<div id="marquee-content">
    This is the content of the marquee.
</div>

4.然后，您需要为这个元素添加以下 CSS 样式：

{
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 50px;
    white-space: nowrap;
    animation: marquee 10s linear infinite;
}

position: absolute; 将元素绝对定位在父元素内部。
top: 0; 和 left: 100%; 设置元素的顶部和左侧位置。您可以根据需要调整这些值。
width: 100%; 和 height: 50px; 设置元素的宽高。您可以根据需要调整这些值。
white-space: nowrap; 禁止元素中的文本换行。
animation: marquee 10s linear infinite; 为元素添加动画。marquee 是动画的名称，10s 是动画的持续时间，linear 是动画的缓动函数，infinite 表示动画将无限循环。

5.最后，您需要在 CSS 中定义 marquee 动画。

@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

from 和 to 定义了动画的开始和结束状态。
translateX(0); 将元素向右移动 0%。
translateX(-100%); 将元素向左移动 100%。

效果预览

现在，您可以将以下 HTML 代码添加到您的网页中：

<!DOCTYPE html>
<html>
<head>
    
    <style>
        #marquee-container {
            position: relative;
            width: 100%;
            height: 50px;
            overflow: hidden;
        }
        #marquee-content {
            position: absolute;
            top: 0;
            left: 100%;
            width: 100%;
            height: 50px;
            white-space: nowrap;
            animation: marquee 10s linear infinite;
        }
        @keyframes marquee {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(-100%);
            }
        }
    </style>
</head>
<body>
    <div id="marquee-container">
        <div id="marquee-content">
            This is the content of the marquee.
        </div>
    </div>
</body>
</html>