animation走马灯动画
时间: 2023-08-25 22:17:47 浏览: 162
纯css3实现走马灯效果
要实现文字走马灯动画,你可以使用CSS和JavaScript来实现。下面是一个简单的示例:
HTML部分:
```html
<div class="marquee">
<p>这是走马灯动画的文字</p>
</div>
```
CSS部分:
```css
.marquee {
width: 100%;
overflow: hidden;
}
.marquee p {
display: inline-block;
white-space: nowrap;
animation: marquee 10s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
```
在上面的示例中,我们创建了一个`div`容器,并将其宽度设置为100%,然后将文字包装在一个`<p>`标签中。通过设置容器的
阅读全文