用js写一个跑马灯demo
时间: 2024-05-08 12:18:43 浏览: 63
js实例—跑马灯
。
这是一个简单的跑马灯代码:
```
<!DOCTYPE html>
<html>
<head>
<style>
.marquee {
width: 100%;
line-height: 50px;
background-color: #ccc;
color: #fff;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee p {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
}
@keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
</style>
</head>
<body>
<div class="marquee">
<p>这是一个简单的跑马灯效果!</p>
</div>
</body>
</html>
```
这个代码使用了CSS3动画,使用了一个叫做`marquee`的类,它有一个宽度为100%的块级元素,并且使用了动画效果。
希望这个代码能帮到你!
阅读全文