晒黑效果图
第一个是div元素
Div类=“框”
Div类=' circle blue'/div
Div类=' circle bluebluesecond'/div
Div类=' circleblack'/div
Div类=' circle black black second'/div
Div类=' circle red'/div
Div类=' circle red redsecond'/div
Div类=' circle yellow'/div
Div类=' circle green'/div
Div类=' circle green green second'/div
div风格我用less写的。
.方框{
Position: relative:
海特： 100vh
.circle{
Position: absolute:
Width: 190px
海特： 190px
Border: 20px solid # 000
Border-radius: 380px:
框-sizing : border-框；
}
.蓝色{
Border-color :rgb (23，132，203)；
左边： 0；
塔： 0；
Z-index: 18:
}
.blueSecond{
Z-索引： 22；
border-color : transparent RGB(23，132，203)transparent transparent；
}
.black{
Border-color: rgb(40、45和43):
Left: 215px:
塔： 0；
Z-index: 18:
}
.blackSecond{
Z-索引： 22；
border-color : transparent transparent RGB(40，45，43) transparent:
}
.red{
Border-color: rgb(229、13和58)；
Left: 430px:
塔： 0；
Z-index: 15:
}
.redSecond{
Z-index: 25:
边界颜色：rgb (229，13，58) RGB (229，13，58) RGB (229，13，58)传输；
}
.yellow{
Border-color :rgb (250，163，24):
Left: 107.5px:
top : 90 px；
Z-索引： 19；
}
.绿色{
Border-Color : transparent RGB(17，157，78) RGB (17，157，78) RGB (17，157，78)；
Left: 322.5px:
top : 90 px；
Z-index: 23:
}
.绿色经济{
Z-index: 17:
Border-color :rgb (17，157，78)transparent transparent transparent；
}}总的来说，实现很简单。利用好绝对定位和border的透明属性就可以了。当然，还会有其他更好的实现方法。如果有兴趣的话，大家都可以试试。最后祝我国奥运会健儿取得好成绩。
1.《100vh看这里!东京奥运会正在举行，前端技术实现奥运五环》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《100vh看这里!东京奥运会正在举行，前端技术实现奥运五环》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.lu-xu.com/guonei/2025273.html
