跑马灯代码
时间: 2023-07-03 15:27:25 浏览: 48
以下是一个简单的 HTML/CSS/JS 实现跑马灯的示例代码:
HTML:
```html
<div class="marquee">
<span>This is a marquee. It will scroll horizontally.</span>
</div>
```
CSS:
```css
.marquee {
width: 100%;
overflow: hidden;
white-space: nowrap;
}
.marquee span {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
```
JS:
```js
// optional: pause on hover
var marquee = document.querySelector('.marquee');
marquee.addEventListener('mouseover', function () {
this.querySelector('span').style.animationPlayState = 'paused';
});
marquee.addEventListener('mouseout', function () {
this.querySelector('span').style.animationPlayState = 'running';
});
```
此代码将创建一个跑马灯效果,将文本水平滚动。你可以自定义文本、颜色、速度等以适应你的需求。