[分享]css3文字间歇滚动效果

CSS3文字间歇滚动效果是一种非常流行的网页效果，它可以让文字在页面上流动起来，给用户带来非常独特的视觉体验。/ CSS样式 / .scroll { width: 100; / 宽度100 / whi...

CSS3文字间歇滚动效果是一种非常流行的网页效果，它可以让文字在页面上流动起来，给用户带来非常独特的视觉体验。

/* CSS样式 */
.scroll {
    width: 100%; /* 宽度100% */
    white-space: nowrap; /* 当元素内文本溢出时，禁止自动换行 */
    overflow: hidden; /* 超出的元素内容隐藏 */
}

.scroll span {
    display: inline-block; /* 内联元素转换为块级元素 */
    padding: 0 10px; /* 左右填充10像素 */
    animation: scroll 10s linear infinite; /* 滚动动画，10秒一次，匀速播放，无限循环 */
}

.scroll span:nth-child(1) {
    animation-delay: 0s; /* 第一个延迟0秒 */
}

.scroll span:nth-child(2) {
    animation-delay: 2s; /* 第二个延迟2秒 */
}

.scroll span:nth-child(3) {
    animation-delay: 4s; /* 第三个延迟4秒 */
}

@keyframes scroll {
    0% {
        transform: translateX(0); /* 移动0像素 */
    }
    100% {
        transform: translateX(-100%); /* 移动到最左边，也就是完成一次滚动动画 */
    }
} 

上面的代码中，我们设置了一个名为.scroll的元素，它包含了多个元素，每个元素中都包含了我们要滚动的文字。然后，我们使用了一些CSS样式，让这些元素产生了滚动的效果。具体来说，我们给每个元素添加了一个animation动画效果，同时也定义了滚动的间隔时间。最后，我们让这个动画产生无限循环的效果，让字体一直往左滚动即可。