要实现文字横向滚动循环效果,可以使用 CSS 的动画和@keyframes
关键帧来创建。下面是一个示例,演示如何使用 CSS 实现文字的横向滚动循环:
HTML代码
<div class="scrolling-text">
<span>This is a scrolling text that loops horizontally.</span>
</div>
CSS 代码:
.scrolling-text {
overflow: hidden;
white-space: nowrap;
width: 100%;
}
.scrolling-text span {
display: inline-block;
padding-left: 100%;
animation: marquee 20s linear infinite; /* 调整动画时长和效果 */
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
在上述代码中,.scrolling-text
是一个具有 overflow: hidden;
属性的容器,用于隐藏超出容器宽度的文本部分。.scrolling-text span
是包含滚动文本的内联元素,通过设置padding-left: 100%;
将文本向右移动到容器的最右侧。
然后,通过animation
属性设置动画效果。marquee
是定义的动画名称,20s
是动画的持续时间,linear
是动画的缓动函数,infinite
表示动画无限循环播放。
@keyframes marquee
定义了动画的关键帧。在 0%
的关键帧中,文本的 transform
属性设置为 translateX(0)
,表示文本不发生偏移。在 100%
的关键帧中,文本向左平移 -100%
,实现了横向滚动效果。
通过调整动画的持续时间、缓动函数和偏移量,你可以自定义滚动循环的速度和效果。