滚动字幕代码
时间: 2023-07-03 07:25:43 浏览: 48
以下是一个简单的滚动字幕的 HTML 代码,你可以根据需要进行修改和美化:
```html
<!DOCTYPE html>
<html>
<head>
<title>滚动字幕</title>
<style type="text/css">
.marquee {
width: 100%;
height: 50px;
overflow: hidden;
position: relative;
background-color: #f5f5f5;
box-sizing: border-box;
padding: 10px;
}
.marquee p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
font-size: 24px;
color: #333;
animation: marquee 10s linear infinite;
animation-delay: 1s;
}
@keyframes marquee {
0% { top: 0; }
100% { top: -50px; }
}
</style>
</head>
<body>
<div class="marquee">
<p>这是一段滚动字幕的示例文本,可以根据需要进行替换和修改。</p>
</div>
</body>
</html>
```
这段代码会在页面上显示一个高度为 50px 的滚动字幕,其中 `<p>` 标签内的文本会不断地向上滚动,直到滚动到顶部后再从底部开始滚动。你可以根据需要进行样式的修改和优化。