marquee使用css怎么替代
时间: 2023-09-10 19:15:22 浏览: 167
图片无缝滚动代码(向左/向下/向上)
可以使用CSS3中的animation属性来替代Marquee标签。以下是使用CSS3动画实现类似Marquee的效果的示例代码:
HTML代码:
```
<div class="marquee">
This is a sample text for the marquee effect using CSS.
</div>
```
CSS代码:
```
.marquee {
width: 100%;
white-space: nowrap;
overflow: hidden;
animation: marquee 10s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
```
在上面的代码中,我们使用了animation属性来定义动画,指定了动画的名称为"marquee",持续时间为10秒,采用线性动画,无限循环。然后定义了一个名为"marquee"的关键帧,其中0%状态下元素未进行位移,100%状态下元素向左位移了100%的距离,即向左滚动了一屏幕的距离。
这样就可以实现类似Marquee标签的效果了。
阅读全文