Comment implémenter un cercle en utilisant CSS3

Dans la conception de sites Web, les cercles sont souvent nécessaires pour obtenir certains effets spécifiques. Dans le passé, nous aurions peut-être eu besoin d'utiliser des images ou du JS pour obtenir l'effet d'anneau, mais maintenant, grâce à la puissance de CSS3, nous pouvons facilement obtenir l'effet d'anneau. Cet article présentera comment utiliser CSS3 pour implémenter un cercle, ainsi que quelques exemples d'application pratiques.

Connaissances de base

Avant d'introduire comment utiliser CSS3 pour implémenter un cercle, nous devons maîtriser quelques connaissances de base :

1. Modèle de boîte

Le modèle de boîte est l'un des concepts les plus basiques en CSS, qui définit un élément sur la page Les dimensions, bordures et remplissages présentés sur. Il existe deux types de modèles de boîtes : le modèle standard et le modèle IE. La différence entre eux réside dans le contenu inclus lors du calcul de la largeur et de la hauteur. Dans cet article, nous utilisons le modèle standard.

2. Border

La bordure en CSS peut être utilisée pour ajouter une bordure extérieure à un élément, et ses propriétés incluent la largeur, le style et la couleur. Nous pouvons définir le style de bordure d'un élément grâce au code suivant :

border: 1px solid #000;

Ce code peut définir une bordure solide noire de 1 pixel de large.

3. border-radius

border-radius est une propriété très utile en CSS3, qui peut être utilisée pour définir les coins arrondis d'un élément. Nous pouvons définir des coins arrondis pour un élément grâce au code suivant :

border-radius: 50%;

Ce code peut transformer les quatre coins d'un élément en coins arrondis, avec un rayon de 50 % de la largeur de l'élément.

Implémentation de l'anneau

Après avoir compris les connaissances de base ci-dessus, nous pouvons commencer à présenter comment utiliser CSS3 pour implémenter l'anneau. Tout d’abord, nous devons définir un élément div qui servira de conteneur de beignet. Nous pouvons définir cet élément grâce au code suivant :

<div class="circle"></div>

.circle {
    width: 100px;
    height: 100px;
    border: 10px solid #000;
    border-radius: 50%;
}

Dans ce code, nous définissons la largeur et la hauteur de l'élément à 100 pixels, la largeur de la bordure à 10 pixels, le style de bordure à une ligne noire continue et le rayon du congé. à la largeur de l'élément.

Ensuite, nous devons utiliser les fonctions de rotation et de pseudo-élément de CSS3 pour obtenir l'effet d'anneau. Nous pouvons définir l'anneau via le code suivant :

.circle::before {
    content: "";
    display: block;
    width: 80px;
    height: 80px;
    margin: -11px -11px 0 -11px;
    border: 10px solid #fff;
    border-radius: 50%;
    transform: rotate(45deg);
}

Dans ce code, nous définissons un pseudo-élément avant et définissons la largeur, la hauteur, la largeur de la bordure, le style de la bordure et le rayon du coin pour celui-ci. Pour le maintenir à l’intérieur de l’anneau, nous utilisons des marges négatives pour ajuster sa position. Enfin, nous utilisons la propriété transform pour faire pivoter l'élément de 45 degrés afin qu'il ressemble à un anneau.

Exemples d'application

Grâce aux méthodes ci-dessus, nous pouvons facilement obtenir l'effet anneau. Ensuite, nous présenterons quelques exemples d’applications pratiques.

1. Effet Badge

Nous pouvons utiliser des cercles pour obtenir l'effet de badges, leur donnant un certain espace d'affichage dans la conception Web. Voici un exemple d'implémentation d'un effet badge :

<div class="badge">
    <span>NEW</span>
</div>

.badge {
    display: inline-block;
    border: 10px solid #000;
    border-radius: 50%;
    position: relative;
    margin-right: 10px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    line-height: 34px;
    text-align: center;
    width: 34px;
    height: 34px;
}

.badge::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    margin: -11px -11px 0 -11px;
    border: 10px solid #fff;
    border-radius: 50%;
    transform: rotate(45deg);
    z-index: -1;
}

.badge span {
    display: block;
    position: relative;
    z-index: 2;
}

Dans ce code, nous définissons un effet badge avec une NOUVELLE balise. En définissant les propriétés de l'anneau et en ajoutant le pseudo-élément before, nous avons obtenu un magnifique badge.

2. Effet de barre de progression

Nous pouvons utiliser un cercle pour obtenir un effet de barre de progression, de sorte qu'il ait une image et un effet d'affichage intuitif pendant l'opération de l'utilisateur. Voici un exemple d'implémentation d'un effet de barre de progression :

<div class="progress-bar">
    <div class="inner-bar" data-value="70"></div>
</div>

.progress-bar {
    position: relative;
    margin: 50px auto;
    width: 120px;
    height: 120px;
    border: 10px solid #f7f7f7;
    border-radius: 50%;
}

.inner-bar {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 100%;
    height: 100%;
    border: 10px solid #3498db;
    border-radius: 50%;
    clip: rect(0, 60px, 120px, 60px);
    transform: rotate(45deg);
    z-index: -1;
}

[data-value]:before {
    content: attr(data-value) "%";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    line-height: 120px;
    text-align: center;
}

Dans ce code, nous définissons un effet de barre de progression avec une progression de 70 %. En définissant les propriétés de l'anneau, en ajoutant un élément de barre intérieure pour gérer la longueur d'affichage de la barre de progression et en utilisant le pseudo-élément avant pour ajouter la valeur de progression, nous avons obtenu un effet de barre de progression simple et esthétique.

Résumé

CSS3 est un moyen simple et pratique d'obtenir l'effet d'anneau, qui peut obtenir une variété d'effets dans la conception Web, tels que des badges, des barres de progression, etc. En maîtrisant les connaissances de base et en utilisant les attributs, pseudo-éléments, rotation et autres fonctions de l'anneau, nous pouvons facilement obtenir l'effet anneau. Dans le même temps, nous pouvons également utiliser davantage la puissance de l’effet d’anneau dans des applications pratiques pour améliorer la qualité et l’expérience utilisateur de l’ensemble de la conception Web.

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!