首页用html写一段前端滚动播报天的代码

用html写一段前端滚动播报天的代码

时间: 2024-01-25 11:03:33 浏览: 190

以下是一个简单的前端滚动播报天的 HTML 代码示例： ```html <!DOCTYPE html> <html> <head> <title>滚动播报天</title> <style type="text/css"> #marquee { width: 300px; height: 24px; overflow: hidden; border: 1px solid #ccc; margin: 10px auto; padding: 3px; } #marquee p { margin: 0; padding: 0; line-height: 24px; font-size: 14px; color: #333; white-space: nowrap; animation: marquee 10s linear infinite; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } </style> </head> <body> <div id="marquee"> <p>今天天气晴朗。</p> <p>明天有雨，记得带伞。</p> <p>最高气温20℃，最低气温8℃。</p> <p>请大家注意保暖。</p> </div> </body> </html> ``` 以上代码中，我们使用了 `<div>` 元素来创建一个滚动播报天的容器，并设置了宽度、高度、边框、内边距等样式。在容器内部，我们使用了多个 `<p>` 元素来表示不同的天气信息。通过设置 `white-space: nowrap` 样式，我们让每个天气信息都在同一行内显示，而不是自动换行。最后，我们使用 CSS3 动画 `@keyframes` 和 `transform` 属性来实现滚动效果，让天气信息在容器内水平滚动。

阅读全文