纯HTML+CSS 画奥运五环标志，我就是闲的

最新推荐文章于 2024-08-05 17:30:48 发布

原创最新推荐文章于 2024-08-05 17:30:48 发布 · 2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #CSS

HTML+CSS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用纯HTML和CSS技术实现奥运五环标志的方法，通过精心设计的层叠样式表布局和定位，成功地复现了奥运五环的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/css01a.css">
    <title>我就是玩一玩 纯HTML+CSS实现奥运五环标 By Bouncing</title>
</head>
<body>
<div class="baseStation">
    <div class="c1-a">
        <div class="c1-b">
            <div class="c1-c"></div>
        </div>
    </div>
    <div class="c1-a2">
        <div class="c1-b2">
            <div class="c1-c2"></div>
        </div>
    </div>

    <div class="c2-a">
        <div class="c2-b">
            <div class="c2-c"></div>
        </div>
    </div>
    <div class="c2-a2">
        <div class="c2-b2">
            <div class="c2-c2"></div>
        </div>
    </div>

    <div class="c3-a">
        <div class="c3-b">
            <div class="c3-c"></div>
        </div>
    </div>
    <div class="c3-a2">
        <div class="c3-b2">
            <div class="c3-c2"></div>
        </div>
    </div>

    <div class="c4-a">
        <div class="c4-b">
            <div class="c4-c"></div>
        </div>
    </div>

    <div class="c5-a">
        <div class="c5-b">
            <div class="c5-c"></div>
        </div>
    </div>
    <div class="c5-a2">
        <div class="c5-b2">
            <div class="c5-c2"></div>
        </div>
    </div>

</div>

</body>
</html>

*{
    margin: 0px;
    padding: 0px;
}

body{
    background-color: #c2c2c2;
}

.baseStation{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -395px;
    margin-top: -185px;
    width: 788px;
    height: 368px;
    /*border: 1px solid #c5c1b9;*/
}

.c1-a, .c1-b, .c1-c, .c1-a2, .c1-b2, .c1-c2, .c2-a, .c2-b, .c2-c, .c2-a2, .c2-b2, .c2-c2, .c3-a, .c3-b, .c3-c, .c3-a2, .c3-b2, .c3-c2, .c4-a, .c4-b, .c4-c, .c5-a, .c5-b, .c5-c, .c5-a2, .c5-b2, .c5-c2
{
    border-radius: 50%;
}

.c1-a{
    position: absolute;
    border: 4px solid #FFF;
}
.c1-a2{
    position: absolute;
    border: 4px solid transparent;
    border-right-color: #fff;
    z-index: 5;
}
.c2-a{
    position: absolute;
    border: 4px solid #FFF;
    left: 270px;
}
.c2-a2{
    position: absolute;
    border: 4px solid transparent;
    border-bottom-color: #FFF;
    border-right-color: #FFF;
    left: 270px;
    z-index: 4;
}
.c3-a{
    position: absolute;
    border: 4px solid #FFF;
    left: 540px;
}
.c3-a2{
    position: absolute;
    border: 4px solid transparent;
    border-bottom-color: #FFF;
    left: 540px;
    z-index: 6;
}
.c4-a{
    position: absolute;
    border: 4px solid #FFF;
    left: 136px;
    top: 120px;
}
.c5-a{
    position: absolute;
    border: 4px solid #FFF;
    left: 406px;
    top: 120px;
}
.c5-a2{
    position: absolute;
    border: 4px solid transparent;
    border-left-color: #FFF;
    left: 406px;
    top: 120px;
    z-index: 5;
}

.c1-b{
    width: 200px;
    height: 200px;
    border: 20px solid #0018c5;
}
.c1-b2{
    width: 200px;
    height: 200px;
    border: 20px solid transparent;
    border-right-color: #0018c5;
}
.c2-b{
    width: 200px;
    height: 200px;
    border: 20px solid #000000;
    z-index: 0;
}
.c2-b2{
    width: 200px;
    height: 200px;
    border: 20px solid transparent;
    border-bottom-color: black;
    border-right-color: black;
}
.c3-b{
    width: 200px;
    height: 200px;
    border: 20px solid #ff0000;
}
.c3-b2{
    width: 200px;
    height: 200px;
    border: 20px solid transparent;
    border-bottom-color: #ff0000;
}
.c4-b{
    width: 200px;
    height: 200px;
    border: 20px solid #c6b300;
}
.c5-b{
    width: 200px;
    height: 200px;
    border: 20px solid #008000;
}
.c5-b2{
    width: 200px;
    height: 200px;
    border: 20px solid transparent;
    border-left-color: #008000;
}

.c1-c{
    width: 192px;
    height: 192px;
    border: 4px solid #FFF;
}
.c1-c2{
    width: 192px;
    height: 192px;
    border: 4px solid transparent;
    border-right-color: #FFF;
}
.c2-c{
    width: 192px;
    height: 192px;
    border: 4px solid #FFF;
}
.c2-c2{
    width: 192px;
    height: 192px;
    border: 4px solid transparent;
    border-bottom-color: #FFF;
    border-right-color: #FFF;
}
.c3-c{
    width: 192px;
    height: 192px;
    border: 4px solid #FFF;
}
.c3-c2{
    width: 192px;
    height: 192px;
    border: 4px solid transparent;
    border-bottom-color: #FFF;
}
.c4-c,
.c5-c{
    width: 192px;
    height: 192px;
    border: 4px solid #FFF;
}
.c5-c2{
    width: 192px;
    height: 192px;
    border: 4px solid transparent;
    border-left-color: #FFF;
}