css 一直滚动

如果你曾经访问过一些网站，你可能会发现一些网站上有一些不断滚动的内容。这种效果可以通过CSS来实现。

首先，我们需要创建一个div元素来包含我们要滚动的内容。我们可以给这个div元素一个固定的高度和宽度，然后让它的overflow属性设置为hidden，这样就可以在div元素的边界内隐藏我们的内容。

    <div class="scroll-container">
        <p>这是第一段滚动的内容</p>
        <p>这是第二段滚动的内容</p>
        <p>这是第三段滚动的内容</p>
    </div>

    .scroll-container {
        height: 150px;
        width: 100%;
        overflow: hidden;
    }

接下来，我们需要使用CSS动画来实现滚动效果。我们可以使用属性选择器来为我们的段落元素添加动画。

    <style>
        .scroll-container p {
            animation: scroll 10s linear infinite;
        }

        @keyframes scroll {
            from { transform: translateY(0); }
            to { transform: translateY(-100%); }
        }
    </style>

这里的animation属性为我们的段落元素添加了一个名为scroll的动画。该动画将在10秒内线性地无限循环。接下来，我们在@keyframes规则中定义了scroll动画的动画行为。通过使用transform属性和translateY函数，我们可以实现将内容向上滚动的效果。from和to关键帧指定了动画的起始和结束状态。

现在，我们可以看到我们的内容在不断地向上滚动。如果你想要改变滚动速度，你可以在animation属性中更改持续时间（单位为秒）。

有了这个技巧，你可以为你的网站添加更加动态的内容，让你的用户不会感到枯燥乏味。