Use css3 to realize the five Olympic rings-CSS Tutorial-php.cn

Use css3 to realize the five Olympic rings

青灯夜游

Release： 2021-04-06 16:08:23

Original

3361 people have browsed it

How to implement the five Olympic rings in css3: First set the border-radius style for five divs and make five rings; then use the position attribute to set the positions of the five rings; finally use the z-index attribute to adjust The hierarchical relationship between each ring is sufficient.

Use css3 to realize the five Olympic rings

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

The five rings can be realized using five statistical divs. To realize the nested relationship of the five rings, pseudo elements need to be added to these five divs respectively.

Two css3 attributes are mainly used here:

1. z-index adjusts the hierarchical relationship of each ring

2. transparent sets the transparency

Specific code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            border: 10px solid;
            border-radius: 50%;
            float: left;
            position: absolute;
        }
        div::after{
            width: 200px;
            height: 200px;
            border: 10px solid;
            border-radius: 50%;
            float: left;
            position: absolute;
            content: "";
            left: -10px;/*相对于父级定位，但不包括border，所以利用负边距使他们重合*/
            top:-10px;
        }
        .blue{
            border-color: blue;
            top:0;
            left: 0;
        }
        .blue::after{
            border-color: blue;
            z-index: 1;
            border-bottom-color: transparent;/*将下边框设为透明，使看到的为黄色环 以下同理*/
        }
        .black{
            border-color: black;
            top:0;
            left: 230px;
        }
        .black::after{
            border-color: black;
            z-index: 1;
            border-left-color: transparent;
        }
        .red{
            border-color: red;
            top:0;
            left: 460px;
        }
        .red::after{
            border-color: red;
            z-index: 1;
            border-left-color: transparent;
        }
        .yellow{
            border-color: yellow;
            top:110px;
            left: 110px;
        }
        .yellow::after{
            border-color: yellow;
        }
        .green{
            border-color: green;
            top:110px;
            left: 340px;
        }
        .green::after{
            border-color: green;
            z-index: 1;
            border-top-color: transparent;
            border-right-color: transparent;
        }
    </style>
</head>
<body>
    <div class="blue"></div>
    <div class="black"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="green"></div>
</body>
</html>

Copy after login

Rendering:

Use css3 to realize the five Olympic rings

Related learning video recommendations: css video tutorial

The above is the detailed content of Use css3 to realize the five Olympic rings. For more information, please follow other related articles on the PHP Chinese website!