首页使用css3实现两段文字向上无缝循环轮播

使用css3实现两段文字向上无缝循环轮播

时间: 2024-11-05 17:33:45 浏览: 29

在CSS3中，我们可以利用`animation`、`keyframes`以及伪元素（`:before` 和 `:after`）来实现文字向上无缝循环轮播的效果。以下是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .container { position: relative; overflow: hidden; /* 隐藏溢出内容 */ } .text-box { position: absolute; top: 0; animation: text-cycle infinite linear forwards; } @keyframes text-cycle { 0% { transform: translateY(0); content: "文本1"; } 50% { transform: translateY(-100px); content: "文本2"; } 100% { transform: translateY(0); content: "文本1"; } /* 文本1再次出现 */ } </style> </head> <body> <div class="container"> <div class="text-box">文本1</div> </div> </body> </html> ``` 在这个例子中： 1. `.container` 容器设置了相对定位，并隐藏了超出的内容。 2. `.text-box` 伪元素设置为绝对定位，它的内容会随着动画上下移动。 3. `@keyframes text-cycle` 规定了动画的关键帧：开始时文本显示在顶部，然后向下移动100像素展示“文本2”，最后回到顶部，形成循环。

阅读全文