[css] 使用css实现彩虹的效果
生活随笔
收集整理的這篇文章主要介紹了
[css] 使用css实现彩虹的效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
[css] 使用css實現彩虹的效果
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>彩虹</title><style>.rainbow-wrap {width: 500px;height: 500px;background-color: red;position: relative;left: 20px;top: 20px;border-radius: 100%;}.rainbow-wrap::after {content: '';width: 500px;height: 250px;background-color: white;position: absolute;bottom: 0;}.rainbow-wrap::before {content: '';width: 200px;height: 200px;background-color: white;position: absolute;bottom: 0;border-radius: 100%;top: 150px;z-index: 10;left: 150px;}.rainbow-wrap .rainbow-item {position: absolute;width: 400px;height: 400px;border-radius: 100%;background-color: yellow;top: 50%;left: 50%;transform: translate(-50%, -50%);}.rainbow-item:nth-child(2) {background-color: blue;width: 300px;height: 300px;}.rainbow-item:nth-child(3) {background-color: green;width: 200px;height: 200px;}</style> </head> <body> <div class="rainbow-wrap"><div class="rainbow-item"></div><div class="rainbow-item"></div><div class="rainbow-item"></div> </div> </body> </html>個人簡介
我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論
主目錄
與歌謠一起通關前端面試題
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的[css] 使用css实现彩虹的效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： eclipse在线汉化站点
- 下一篇： [css] 举例说明伪类:focus-