transition跑马灯
时间: 2023-08-14 20:13:24 浏览: 45
对于跑马灯效果的实现,你可以使用CSS3的transition属性结合animation来实现。下面是一个简单的示例代码:
HTML部分:
```html
<div class="marquee">
<span>This is a marquee text.</span>
</div>
```
CSS部分:
```css
.marquee {
width: 200px;
height: 20px;
overflow: hidden;
}
.marquee span {
display: inline-block;
white-space: nowrap;
animation: marquee 10s linear infinite;
transition: transform 1s ease-in-out;
}
@keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
.marquee:hover span {
transform: translateX(-50%);
transition: transform 1s ease-in-out;
}
```
这段代码会创建一个宽度为200px的容器,内部文字会以跑马灯效果从右向左滚动。当鼠标悬停在跑马灯上时,文字会暂停滚动并向左移动一半的距离。
你可以根据需要调整容器的宽高、动画持续时间和滚动速度。希望对你有所帮助!如果你有其他问题,请随时提问。