首页html和js实现文字移动动画,文字从左到右移动,当最后一个字到达最右侧时,则最后一个字换到下一行继续移动,以此类推,请给出完整代码

html和js实现文字移动动画,文字从左到右移动,当最后一个字到达最右侧时,则最后一个字换到下一行继续移动,以此类推,请给出完整代码

时间: 2024-03-02 21:52:50 浏览: 265

以下是一个使用HTML和JavaScript实现文字移动动画的示例代码，文字会从左到右移动，当最后一个字到达最右侧时，会换行继续移动。你可以将代码复制到一个HTML文件中，然后在浏览器中打开该文件查看效果。 ```html <!DOCTYPE html> <html> <head> <style> #marquee { position: relative; width: 100%; height: 50px; overflow: hidden; } #marquee p { position: absolute; white-space: nowrap; font-size: 24px; animation: marquee 10s linear infinite; } @keyframes marquee { 0% { left: 100%; } 100% { left: -100%; } } </style> </head> <body> <div id="marquee"> <p>这是一段文字移动动画，文字会从左到右移动，当最后一个字到达最右侧时，会换行继续移动。</p> </div> <script> var marquee = document.getElementById('marquee'); var p = marquee.getElementsByTagName('p')[0]; var clone = p.cloneNode(true); marquee.appendChild(clone); </script> </body> </html> ``` 上述代码中，我们使用了CSS3的animation属性实现文字的左右移动，使用了JavaScript动态添加了一个拷贝节点，从而实现了文字从最后一个字换行继续移动的效果。你可以将`<p>`标签中的文字替换成你想要展示的内容，也可以通过修改CSS样式来自定义动画效果。

阅读全文