html实现文字移动动画,文字从左到右移动,当最后一个字到达最右侧时,则最后一个字换到下一行继续移动,以此类推,请给出完整代码
时间: 2023-09-08 17:10:50 浏览: 32
可以使用CSS3的animation属性实现文字移动动画。以下是一个示例代码,文字会从左到右移动,当最后一个字到达最右侧时,会换行继续移动。
```html
<!DOCTYPE html>
<html>
<head>
<style>
.marquee {
width: 100%;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee p {
display: inline-block;
padding-left: 100%;
animation: marquee 10s 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>
```
你可以将上述代码复制到一个HTML文件中,然后在浏览器中打开该文件查看效果。如果你想要修改文字内容,可以将`<p>`标签中的文字替换成你想要展示的内容即可。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)
![](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)