使用html和css实现文字滚屏
时间: 2023-05-29 15:01:23 浏览: 99
以下是一个简单的实现文字滚屏的 HTML 和 CSS 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字滚屏</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
animation: scroll 20s linear infinite;
}
.text {
font-size: 36px;
font-weight: bold;
margin-right: 50px;
display: inline-block;
vertical-align: middle;
}
@keyframes scroll {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
</style>
</head>
<body>
<div class="container">
<span class="text">这是一段滚动的文字</span>
<span class="text">这是一段滚动的文字</span>
<span class="text">这是一段滚动的文字</span>
<span class="text">这是一段滚动的文字</span>
<span class="text">这是一段滚动的文字</span>
</div>
</body>
</html>
```
在这个例子中,我们使用了 `position: absolute` 和 `transform: translate(-50%, -50%)` 来将文字容器居中。我们设置了文字容器为 `white-space: nowrap`,这样文字就不会自动换行。然后,我们使用动画 `@keyframes` 和 `transform: translateX(-100%)` 来让文字容器水平移动并实现滚动的效果。最后,我们将文字容器的 `animation` 属性设置为 `20s linear infinite`,这使得滚动动画持续时间为 20 秒,并且持续无限次。
有了这些 CSS,我们只需要在 HTML 中添加需要滚动的文字,并将它们包裹在一个容器中即可。在这个例子中,我们使用了 5 个 `<span>` 元素作为需要滚动的文字。你可以根据需要更改这些文字内容和数量。
相关推荐
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![.rar](https://img-home.csdnimg.cn/images/20210720083646.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)