【css】使用CSS绘制奥运五环--巴黎奥运

使用CSS绘制奥运五环

在2024年巴黎奥运会期间，本文来使用 CSS 来画一个奥运五环。奥运五环由五个相互交叠的圆环组成，分别代表五大洲。

奥运五环是相互连接的，因此在视觉上会产生重叠效果，这也是实现五环最有挑战性的部分

HTML结构

首先，我们创建一个包含五个环的HTML结构，其中黑色环作为父元素，其他颜色的环作为子元素。

html 复制代码

<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样式

接下来，我们通过CSS来定义这些环的样式。

黑环和基本样式

css 复制代码

.black {
   position: relative;
   width: 200px;
   height: 200px;
   border-radius: 50%;
   border-width: 20px;
   border-style: solid;
   border-color: #000; /* 黑色 */
   margin: 0 auto; /* 水平居中 */
}

.ring {
   position: absolute;
   width: 200px;
   height: 200px;
   border-radius: 50%;
   border-width: 20px;
   border-style: solid;
   top: -20px;
   right: -20px;
}

绿环

css 复制代码

.green {
   color: #30a751; /* 绿色 */
   top: 70px;
   right: -125px;
   z-index: 2;
}

红环

css 复制代码

.red {
   color: #ef314e; /* 红色 */
   right: -230px;
   z-index: 2;
}

黄环和蓝环

css 复制代码

.yellow {
   color: #fcb32e; /* 黄色 */
   top: 70px;
   left: -125px;
   z-index: 2;
}

.blue {
   color: #0082c9; /* 蓝色 */
   left: -230px;
   z-index: 2;
}

伪元素实现环环相扣

为了实现环环相扣的效果，我们使用伪元素来调整环的位置和颜色。

css 复制代码

.black::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;
}

.black::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;
}

.red::after {
   border-bottom: 20px solid currentcolor;
}

.blue::after {
   border-right: 20px solid currentcolor;
}

完整示例

将上述HTML和CSS代码组合，我们就可以得到一个视觉上环环相扣的奥运五环标志。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Olympic Rings</title>
    <style>
        .black {
            position: relative;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border-width: 20px;
            border-style: solid;
            border-color: #000; /* 黑色 */
            margin: 0 auto; /* 水平居中 */
        }

        .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;
            z-index: 2;
        }

        .yellow {
            color: #fcb32e; /* 黄色 */
            top: 70px;
            left: -125px;
            z-index: 2;
        }

        .blue {
            color: #0082c9; /* 蓝色 */
            left: -230px;
            z-index: 2;
        }

        .black::after, .black::before {
            content: "";
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 100%;
            top: -20px;
            right: -20px;
            border: 20px solid transparent;
        }

        .black::after {
            border-right: 20px solid currentcolor;
            z-index: 3;
        }

        .black::before {
            border-bottom: 20px solid currentcolor;
            z-index: 1;
        }

        .red::after {
            border-bottom: 20px solid currentcolor;
        }

        .blue::after {
            border-right: 20px solid currentcolor;
        }
    </style>
</head>
<body>
    <div class="black">
        <div class="ring blue"></div>
        <div class="ring yellow"></div>
        <div class="ring green"></div>
        <div class="ring red"></div>
    </div>
</body>
</html>

通过上述步骤，我们成功地使用CSS绘制了奥运五环的标志。这个方法不仅展示了CSS的强大能力，也体现了前端开发中对细节的关注和对视觉效果的追求。