首页html滚动字幕代码

html滚动字幕代码

时间: 2023-11-29 17:44:41 浏览: 191

以下是两种实现HTML滚动字幕的代码： 1. 使用marquee标签 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滚动字幕</title> <style> body { background: black; padding: 20px; } marquee { font-weight: bolder; font-size: 40px; color: white; } </style> </head> <body> <marquee loop="2">欢迎来到我的网站！</marquee> </body> </html> ``` 2. 使用CSS动画 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滚动字幕</title> <style> body { background: black; padding: 20px; } .scroll-text { font-weight: bolder; font-size: 40px; color: white; position: absolute; animation: scroll 10s linear infinite; } @keyframes scroll { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } </style> </head> <body> <div class="scroll-text">欢迎来到我的网站！</div> </body> </html> ```

阅读全文