用js写一道彩虹

科技前沿 • 2025-03-14 18:58 • 阅读 145

大家好，我是讯享网，很高兴认识大家。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1, .box2, .box3{ 
    width: 200px; } .box1{ 
    width: 400px; height: 200px; overflow: hidden; } .box1::before{ 
    float: left; display: block; height: 400px; width:400px; border-radius: 100%; border: solid 10px purple; box-sizing: border-box; content: ""; } .box1::after{ 
    margin-top: 10px; margin-left: 10px; display: block; width: 380px; height: 380px; border: solid #ffff00 10px; border-radius: 100%; box-sizing: border-box; content: ""; } .box2{ 
    float: left; margin-top: -180px; margin-left: 20px; width: 360px; height: 180px; overflow: hidden; } .box2::before{ 
    float: left; display: block; margin: 0; width: 360px; height: 360px; border-radius: 100%; border: solid 10px blue; box-sizing: border-box; content: ""; } .box2::after{ 
    display: block; margin-top: 10px; margin-left: 10px; width: 340px; height: 340px; border-radius: 100%; border: solid 10px lightseagreen; box-sizing: border-box; content: ""; } .box3{ 
    margin-top: -160px; margin-left: 40px; width: 340px; height: 160px; overflow: hidden; } .box3::before{ 
    float: left; display: block; width: 320px; height: 320px; border: solid 10px red; border-radius: 100%; box-sizing: border-box; content: ""; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </body> </html>

讯享网

最后的显示效果为
在这里插入图片描述
讯享网
如果你喜欢的话，不妨试试吧
我们下个文章见！！！

用js写一道彩虹

相关推荐