css实现文字滚动首尾相接
时间: 2024-10-12 10:11:33 浏览: 25
css3文字上下滚动切换特效
5星 · 资源好评率100%
在CSS中,实现文字滚动首尾相接的效果,也就是循环滚动文本,通常需要结合CSS动画和`white-space`属性。你可以创建一个无限滚动的文字效果,例如使用`marquee`标签,但在现代浏览器中,`marquee`已经被弃用,推荐使用JavaScript配合伪元素来模拟。
下面是一个简单的示例,使用`:before`和`:after`伪元素以及`animation`动画实现首尾相连的滚动:
HTML:
```html
<div class="scroll-text">这是一个无限滚动的文本</div>
```
CSS:
```css
.scroll-text {
display: inline-block;
white-space: nowrap; /* 防止换行 */
position: relative;
overflow: hidden;
}
.scroll-text:before,
.scroll-text:after {
content: attr(data-text); /* 使用data-text属性保存文本 */
display: block;
animation: scroll infinite linear forwards;
}
@keyframes scroll {
0% { left: 0; }
100% { left: -100%; }
}
```
这里,你需要将`data-text`属性绑定到实际的文本,并且每个循环滚动一次,文本会移动一屏宽度的距离。
阅读全文