html文字轮播代码
时间: 2023-08-11 10:04:38 浏览: 50
以下是一个简单的 HTML 文字轮播代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>文字轮播</title>
<style>
#slider {
overflow: hidden;
height: 50px;
line-height: 50px;
background-color: #f5f5f5;
}
#slider ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
animation: slide 5s infinite;
}
#slider li {
padding: 0 20px;
}
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
</style>
</head>
<body>
<div id="slider">
<ul>
<li>第一条文字</li>
<li>第二条文字</li>
<li>第三条文字</li>
<li>第四条文字</li>
<li>第五条文字</li>
</ul>
</div>
</body>
</html>
```
这个代码使用了 CSS 的动画来实现文字的轮播效果。具体来说,我们把文字放在一个 `ul` 列表中,然后使用 `flex` 布局和 `transform` 属性来实现水平滚动。我们还定义了一个名为 `slide` 的动画,并将它应用到了 `ul` 列表上,让文字不断滚动。