以下是一个使用 HTML 和 CSS 实现栏自动变色的示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <style> #titleBar { width: 100%; height: 50px; background-color: red; transition: background-color 2s ease-in-out; } #titleBar:hover { background-color: blue; } </style> </head> <body> <div id="titleBar"> <h1>栏</h1> </div> </body> </html> ``` 在上述代码中，我们首先创建了一个具有 `id` 为 `titleBar` 的 `div` 元素作为栏。通过 CSS 为其设置了初始的颜色为红色，并添加了一个过渡效果，使得颜色在 2 秒内平滑地变化。当鼠标悬停在栏上时，颜色会变为蓝色。 [2024-08-06 16:13:58 | AI写代码神器 | 231点数解答]