Maison > Article > interface Web > Utilisez CSS3 pour réaliser les cinq anneaux olympiques

Utilisez CSS3 pour réaliser les cinq anneaux olympiques

青灯夜游original: 2021-04-06 16:08:233201parcourir

Comment implémenter les cinq anneaux olympiques en CSS3 : définissez d'abord le style border-radius pour 5 divs et créez cinq anneaux ; puis utilisez l'attribut position pour définir les positions des cinq anneaux ; attribut d'index à ajuster La relation hiérarchique entre chaque anneau est suffisante.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Les cinq anneaux peuvent être réalisés à l'aide de cinq divs statistiques. Pour réaliser la relation imbriquée des cinq anneaux, des pseudo-éléments doivent être ajoutés respectivement à ces cinq divs.

Deux attributs CSS3 sont principalement utilisés ici :

1. z-index ajuste la relation hiérarchique de chaque anneau

2. transparent définit la transparence

. Code spécifique :

<!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>

Rendu :

Utilisez CSS3 pour réaliser les cinq anneaux olympiques

Recommandations vidéo d'apprentissage associées : Tutoriel vidéo CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Élément CSS centré verticalementArticle suivant：Élément CSS centré verticalement

Articles Liés

Voir plus