html纵向的跑马灯效果
时间: 2024-01-11 20:22:11 浏览: 46
以下是实现HTML纵向跑马灯效果的代码示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vertical Marquee</title>
<style>
.marquee {
height: 100px;
overflow: hidden;
position: relative;
}
.marquee p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 100px;
animation: marquee 10s linear infinite;
}
@keyframes marquee {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
</style>
</head>
<body>
<div class="marquee">
<p>This is a vertical marquee effect.</p>
</div>
</body>
</html>
```
这段代码使用CSS的动画特性实现了纵向跑马灯效果。通过设置`overflow: hidden`和`position: relative`属性,将容器的高度限制在一定范围内,并且隐藏超出范围的内容。然后,使用`position: absolute`将文字元素定位在容器内,并通过`animation`属性设置动画效果,使文字元素在垂直方向上循环滚动。