gpt4 book ai didi

html - CSS设计-彩虹

转载 作者:太空狗 更新时间:2023-10-29 15:22:51 25 4
gpt4 key购买 nike

我只想使用 CSS 来创建彩虹。以下是所需内容的图片。

enter image description here

这是我的代码(到目前为止):

* {
margin: 0;
padding: 0;
}
#r {
height: 80vw;
width: 80vw;
background-color: #f00;
position: absolute;
z-index: 1;
}
#o {
height: 76vw;
width: 76vw;
background-color: #fe6230;
position: absolute;
top: 2vw;
left: 2vw;
z-index: 2;
}
#y {
height: 72vw;
width: 72vw;
background-color: #fef600;
position: absolute;
top: 4vw;
left: 4vw;
z-index: 3;
}
#g {
height: 68vw;
width: 68vw;
background-color: #00bc00;
position: absolute;
top: 6vw;
left: 6vw;
z-index: 4;
}
#b {
height: 64vw;
width: 64vw;
background-color: #0048fe;
position: absolute;
top: 8vw;
left: 8vw;
z-index: 5;
}
#i {
height: 60vw;
width: 60vw;
background-color: #000083;
position: absolute;
top: 10vw;
left: 10vw;
z-index: 6;
}
#v {
height: 56vw;
width: 56vw;
background-color: #30009b;
position: absolute;
top: 12vw;
left: 12vw;
z-index: 7;
}
<div id="r">
</div>
<div id="o">
</div>
<div id="y">
</div>
<div id="g">
</div>
<div id="b">
</div>
<div id="i">
</div>
<div id="v">
</div>

我的代码的问题是我无法 flex 它(就像在真正的彩虹中一样)。我还需要隐藏一半的彩虹。

最佳答案

这可以使用带有 :pseudo-element 和 box-shadow 的单个 div 元素来完成。

div {
position: relative;
width: 300px;
height: 150px;
background: white;
overflow: hidden;
transform: scale(2);
margin-left: 130px;
margin-top: -50px;
}
div:after {
position: absolute;
content: '';
width: 100px;
height: 100px;
top: 100px;
left: 50px;
border-radius: 50%;
box-shadow: 0 0 0 5px #4200AB, 0 0 0 10px #000095, 0 0 0 15px #00ABFF, 0 0 0 20px #00C800, 0 0 0 25px #FFF800, 0 0 0 30px #FF7642, 0 0 0 35px #E40000;
}
<div></div>

使用 vh/vw 单位的示例。

Demo on CodePen

由于视口(viewport)比例,这里的代码片段看起来很糟糕,在 CodePen 上观看效果更好。

div {
position: relative;
width: 95vw;
height: 45vw;
overflow: hidden;
background: transparent;
transform: translate(-50vw, -16.666vw);
top: 8vw;
left: 50vw;
}
div:after {
position: absolute;
content: '';
width: 50%;
height: 100%;
top: 25vw;
left: 25vw;
border-radius: 50%;
box-shadow: 0 0 0 2vw #4200AB, 0 0 0 4vw #000095, 0 0 0 6vw #00ABFF, 0 0 0 8vw #00C800, 0 0 0 10vw #FFF800, 0 0 0 12vw #FF7642, 0 0 0 14vw #E40000;
}
body {
margin: 0;
}
<div></div>

关于html - CSS设计-彩虹,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27730476/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com