首页利用HTML5制作彩虹

利用HTML5制作彩虹

时间: 2024-10-25 19:17:58 浏览: 16

利用HTML5制作彩虹的效果通常通过CSS3的动画和渐变背景色实现。下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .rainbow { width: 400px; height: 100px; background-image: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet); animation: rainbow 10s ease-in-out infinite; } @keyframes rainbow { 0% { background-position: 0px; } 100% { background-position: 400px; } } </style> </head> <body> <div class="rainbow"></div> </body> </html> ``` 在这个例子中，`.rainbow` 类设置了彩虹渐变背景颜色，从红色到紫色。`animation` 属性创建了一个名为 `rainbow` 的动画，它会无限循环，每次旋转一圈（400像素），实现了彩虹效果。

阅读全文