純 CSS 實(shí)現(xiàn)奧運(yùn)五環(huán)，環(huán)環(huán)相扣！
2024 巴黎奧運(yùn)會(huì)正如火如荼地進(jìn)行，本文來(lái)使用 CSS 來(lái)畫一個(gè)奧運(yùn)五環(huán)。奧運(yùn)五環(huán)是相互連接的，因此在視覺上會(huì)產(chǎn)生重疊效果，這也是實(shí)現(xiàn)五環(huán)最有挑戰(zhàn)性的部分。接下來(lái)，將利用 CSS 的偽元素，巧妙地實(shí)現(xiàn)環(huán)環(huán)相扣的效果！
根據(jù)五環(huán)的位置特點(diǎn)，可以將中間的黑色環(huán)設(shè)置為 HTML 的父元素，而將其他顏色的環(huán)設(shè)置為子元素。這樣，其他環(huán)就可以相對(duì)于黑色環(huán)進(jìn)行定位。整體的 HTML 結(jié)構(gòu)如下：
<div class="black">
<div class="ring blue"></div>
<div class="ring yellow"></div>
<div class="ring green"></div>
<div class="ring red"></div>
</div>首先，用 CSS 邊框畫出黑環(huán)和其他四環(huán)的基本樣式：
.black {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
border-width: 20px;
border-style: solid;
}
.ring {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
border-width: 20px;
border-style: solid;
top: -20px;
right: -20px;
}接下來(lái)畫綠環(huán)，它相對(duì)于黑環(huán)進(jìn)行定位，向右向下移動(dòng)，并且層級(jí)比黑環(huán)高：
.green {
color: #30a751;
top: 70px;
right: -125px;
z-index: 2;
}此時(shí)的效果是這樣的，黑環(huán)的z-index為 1，綠環(huán)的z-index為 2：
而我們希望兩環(huán)右側(cè)的交車點(diǎn)處，黑環(huán)位于上方，這時(shí)就可以使用偽元素來(lái)實(shí)現(xiàn)。給黑環(huán)添加一個(gè)和它大小一樣的偽元素::after，并將其放在黑環(huán)的正上方，z-index為3。接著，將偽元素的右邊框設(shè)置為黑色，其他方向?yàn)橥该?，這樣就成功使黑環(huán)的右側(cè)看起來(lái)位于綠環(huán)上方了：
.black {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
border-width: 20px;
border-style: solid;
&::after {
content: "";
position: absolute;
width: 200px;
height: 200px;
border-radius: 100%;
top: -20px;
right: -20px;
border: 20px solid transparent;
border-right: 20px solid currentcolor;
z-index: 3;
}
}效果如下：
這里我來(lái)向右移動(dòng)一下這個(gè)偽元素的位置，來(lái)看看他的樣子：
到這你應(yīng)該就明白了，這里只是視覺上的環(huán)環(huán)相扣，實(shí)際上，兩個(gè)環(huán)并不在同一層。
接下來(lái)畫紅環(huán)。由于綠環(huán)的z-index為2，所以紅環(huán)位于綠環(huán)下方：
.red {
color: #ef314e;
right: -230px;
}效果如下：
此時(shí)只需按照上面的步驟，給紅環(huán)添加一個(gè)帶有紅色下邊框的偽元素即可：
.red {
color: #ef314e;
right: -230px;
&::after {
content: "";
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
border-width: 20px;
border-style: solid;
top: -20px;
right: -20px;
border: solid 20px transparent;
border-bottom: solid 20px currentcolor;
z-index: 2;
}
}效果如下：
黃環(huán)和藍(lán)環(huán)同理，這里直接附上完整代碼：
.black {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
border-width: 20px;
border-style: solid;
&::after {
content: "";
position: absolute;
width: 200px;
height: 200px;
border-radius: 100%;
top: -20px;
right: -20px;
border: 20px solid transparent;
border-right: 20px solid currentcolor;
z-index: 3;
}
&::before {
content: "";
position: absolute;
width: 200px;
height: 200px;
border-radius: 100%;
top: -20px;
right: -20px;
border: 20px solid transparent;
border-bottom: 20px solid currentcolor;
z-index: 1;
}
.ring {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
border-width: 20px;
border-style: solid;
top: -20px;
right: -20px;
}
.green {
color: #30a751;
top: 70px;
right: -125px;
z-index: 2;
}
.red {
color: #ef314e;
right: -230px;
&::after {
content: "";
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
border-width: 20px;
border-style: solid;
top: -20px;
right: -20px;
border: solid 20px transparent;
border-bottom: solid 20px currentcolor;
z-index: 2;
}
}
.yellow {
color: #fcb32e;
top: 70px;
left: -125px;
}
.blue {
color: #0082c9;
left: -230px;
&::after {
content: "";
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
border-width: 20px;
border-style: solid;
top: -20px;
right: -20px;
border: solid 20px transparent;
border-right: solid 20px currentcolor;
z-index: 2;
}
}
}最終效果如下：
