Html CSS设计-彩虹

我想创建一个彩虹只使用CSS。下面是所需内容的图像

这是我的代码（到目前为止）：

*{
保证金：0；
填充：0；
}
#r{
高度：80vw；
宽度：80vw；
背景色：#f00；
位置：绝对位置；
z指数：1；
}
#o{
高度：76vw；
宽度：76vw；
背景色：#fe6230；
位置：绝对位置；
top:2vw；
左：2vw；
z指数：2；
}
#y{
高度：72vw；
宽度：72vw；
背景色：#fef600；
位置：绝对位置；
top:4vw；
左：4vw；
z指数：3；
}
#g{
高度：68vw；
宽度：68vw；
背景色：#00bc00；
位置：绝对位置；
top:6vw；
左：6vw；
z指数：4；
}
#b{
高度：64vw；
宽度：64vw；
背景色：#0048fe；
位置：绝对位置；
top:8vw；
左：8vw；
z指数：5；
}
#我{
高度：60vw；
宽度：60vw；
背景色：#000083；
位置：绝对位置；
top:10vw；
左：10vw；
z指数：6；
}
#五{
身高：56vw；
宽度：56vw；
背景色：#30009b；
位置：绝对位置；
top:12vw；
左：12vw；
z指数：7；
}

---

这可以使用单个

div

元素和：伪元素和

框阴影来完成


div{
位置：相对位置；
宽度：300px；
高度：150像素；
背景：白色；
溢出：隐藏；
变换：尺度（2）；
左边距：130像素；
利润上限：-50px；
}
部门：之后{
位置：绝对位置；
内容：''；
宽度：100px；
高度：100px；
顶部：100px；
左：50px；
边界半径：50%；
盒影：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 35px#E40000；
}
这里有一个稍微不同的方法，使用
径向梯度。这种方法几乎是不言自明的，因为渐变背景是以椭圆方式应用的，具有多个颜色停止点（每种颜色一个加上开始和结束处的白色）

注意：对于
box shadow
而言，比对于
径向渐变而言，效果要好得多，因此chipChocolate.py发布的答案可能是目前最好的答案

这一个也可以支持大众/vh单位，并可以适应相应的外观


.rainbow{
高度：25vw；
宽度：50vw；
背景：-webkit径向梯度（50%110%，椭圆形，白色35%，紫色35%，紫色40%，靛蓝40%，靛蓝45%，蓝色45%，蓝色50%，绿色50%，绿色55%，黄色55%，黄色60%，橙色60%，橙色65%，红色65%，红色70%，白色70%）；
背景：-moz径向梯度（50%110%，椭圆，白色35%，紫色35%，紫色40%，靛蓝40%，靛蓝45%，蓝色45%，蓝色50%，绿色50%，绿色55%，黄色55%，黄色60%，橙色60%，橙色65%，红色65%，红色70%，白色70%）；
背景：径向梯度（椭圆50%110%，白色35%，紫色35%，紫色40%，靛蓝40%，靛蓝45%，蓝色45%，蓝色50%，绿色50%，绿色55%，黄色55%，黄色60%，橙色60%，橙色65%，红色65%，红色70%，白色70%）；
}
我想我应该添加一些在使用codepen时发现的彩虹设计，以获得您的灵感（注意我没有制作这些，它更像是供参考）

选择1

@import”http://fonts.googleapis.com/css?family=Racing+Sans+1”；
@-moz关键帧旋转{
从{
-moz变换：旋转（0度）；
}
到{
-moz变换：旋转（360度）；
}
}
@-webkit关键帧旋转{
从{
-webkit变换：旋转（0度）；
}
到{
-webkit变换：旋转（360度）；
}
}
@关键帧旋转{
从{
变换：旋转（0度）；
}
到{
变换：旋转（360度）；
}
}
#彩虹{
高度：290px；
溢出：隐藏；
保证金：0自动；
位置：相对位置；
宽度：580px；
-moz过渡：高度500ms，缓进缓出；
-webkit过渡：高度500ms，易于进出；
过渡：高度500ms，易于进出；
}
#彩虹{
高度：600px；
}
#李虹{
位置：绝对位置；
身高：100%；
文本缩进：-9999px；
不透明度：0.8；
}
#彩虹，丝带{
边界半径：50%；
边框样式：实心；
边框宽度：40px；
位置：绝对位置；
左：继承；
顶部：继承；
-moz动画：旋转；
-moz动画持续时间：2s；
-moz动画计时功能：轻松输入输出；
-moz动画迭代次数：无限；
-moz动画方向：交替；
-moz动画填充模式：正向；
-webkit动画：旋转；
-webkit动画持续时间：2秒；
-webkit动画计时功能：轻松输入输出；
-webkit动画迭代计数：无限；
-webkit动画方向：交替；
-webkit动画填充模式：正向；
动画：旋转；
动画持续时间：2秒；
动画计时功能：轻松进出；
动画迭代次数：无限；
动画方向：交替；
动画填充模式：正向；
}
#彩虹，红色{
左：0；
排名：0；
}
#彩虹，红色，丝带{
边框颜色：红色；
高度：500px；
宽度：500px；
剪辑：矩形（0px，580px，290px，0px）；
-moz动画延迟：0s；
-webkit动画延迟：0秒；
动画延迟：0s；
}
#彩虹，橙色{
左：20px；
顶部：20px；
}
#彩虹，橙色，丝带{
边框颜色：橙色；
高度：420px；
宽度：420px；
剪辑：矩形（0px，500px，250px，0px）；
-moz动画延迟：1s；
-webkit动画延迟：1s；
动画延迟：1s；
}
#彩虹，黄色{
左：40px；
顶部：40px；
}
#彩虹，黄色，丝带{
边框颜色：黄色；
高度：340px；
宽度：340px；
剪辑：矩形（0px，420px，210px，0px）；
-moz动画延迟：2s；
-webkit动画延迟：2s；
动画延迟：2s；
}
#彩虹，绿色{
左：60px；
顶部：60px；
}
#彩虹，绿色，丝带{
边框颜色：绿色；
高度：260px；
宽度：260px；
剪辑：矩形（0px，340px，170px，0px）；
-moz动画延迟：3s；
-webkit动画延迟：3s；
动画延迟：3s；
}
#彩虹，蓝色{
左：80px；
顶部：80px；
}
#彩虹，蓝色，丝带{
边框颜色：蓝色；
高度：180像素；
宽度：180px；
剪辑：矩形（0px，260px，130px