Comment implémenter des effets d'animation de boutons radio en CSS3

Comment implémenter des effets d'animation de boutons radio en CSS3 ? Pourquoi devons-nous implémenter des effets d’animation de boutons radio ? Donnons deux exemples pour vous aider à maîtriser l'utilisation de CSS3 pour implémenter des effets d'animation de boutons radio

<div>
<input type="radio" name="radio-1" id="radio-1-1" checked="checked">
<label for="radio-1-1"></label>
<input type="radio" name="radio-1" id="radio-1-2">
<label for="radio-1-2"></label>
<input type="radio" name="radio-1" id="radio-1-3">
<label for="radio-1-3"></label>
</div>

Ici, nous spécifions la valeur de type de la balise d'entrée comme radio, et listons toutes les radios. les valeurs de nom sont toutes les mêmes, de sorte que l'effet de sélection unique puisse être obtenu. Concernant l'attribut for dans l'étiquette ici, je n'ai pas compris pourquoi il était défini ainsi au début, j'ai ensuite cherché la définition de cet attribut. Quoi qu'il en soit, la signification générale est que tant que cet attribut est défini, quand. nous cliquons sur l'élément d'étiquette, parcourons. Le récepteur déplacera automatiquement le focus vers la radio. Ensuite, utilisez CSS pour définir des effets sur HTML.

.radio-1 {        width: 900px;        padding: 3% 0%;        margin: 10px auto;        background-color: darkseagreen;        text-align: center;
}
.radio-1 label {        display: inline-block;        position: relative;        width: 28px;        height: 28px;        border: 1px solid #cccccc;        border-radius: 100%;        cursor: pointer;        background-color: #ffffff;        margin-right: 10px;
}

Ici, nous examinons d'abord les paramètres de l'élément label. J'ai présenté la plupart des attributs dans les articles précédents. Le seul attribut inconnu est le curseur. Cet attribut est utilisé pour définir la souris. style, après l'avoir réglé sur pointeur, lorsque notre souris est placée sur l'élément label, le style de la souris devient une main (c'est le cas sur mon ordinateur). D'accord, continuons à regarder

.radio-1 label:after {
content: "";        position: absolute;        width: 20px;        height: 20px;        top: 4px;        left: 4px;        background-color: #666;        border-radius: 50%;        transform: scale(0);        transition: transform .2s ease-out;
}

Ici, nous utilisons le sélecteur after. Pourquoi définir cet attribut ? Il suffit de définir le petit point noir comme indiqué sur l'image ci-dessus. Tout d'abord, nous définissons l'attribut content sur vide, ce qui signifie que nous n'avons pas besoin de le remplir de contenu, car nous voulons simplement définir la couleur d'arrière-plan sur noir, c'est tout. De plus, au début, nous définissons la valeur d'échelle de la transformation sur 0. L'effet est de masquer les petits points noirs.

.radio-1 [type="radio"]:checked + label {        background-color: #eeeeee;        transition: background-color .2s ease-in;
}
 
.radio-1 [type="radio"]:checked + label:after {
transform: scale(1);        transition: transform .2s ease-in;
}

Notez que le symbole + est utilisé ici. Qu'est-ce que cela signifie ? Son nom scientifique est appelé sélecteur de frères et sœurs adjacents, ce qui signifie sélectionner l'élément immédiatement après un autre élément, et les deux ont le même élément parent. Ce que cela signifie ici, c'est de sélectionner l'étiquette qui apparaît après la radio. Quelqu'un veut demander, pourquoi. nous avons configuré cela ? Il suffit de définir l'étiquette directement. Imaginez que dans un très grand système, nous puissions utiliser l'élément label plusieurs fois. Afin d'éviter toute confusion, ce paramètre sera plus précis. Ici, nous voyons l'attribut de transition, qui est utilisé pour définir l' effet de transition . Enfin, cachez notre radio et c’est fini.

.radio-1 [type="radio"]{        display: none;
}
Action two

C'est notre deuxième effet spécial

demo2.gif

En fait, le premier sentiment en voyant cette animation est qu'elle est exactement la même que la précédente un, sauf que l'attribut transform est défini sur rotation. Je ne l'expliquerai plus. Tant que vous combinez l'exemple précédent, vous pouvez facilement créer un tel effet :

 
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>Radio</title>
<style>
.radio-2 { width: 900px;padding: 3% 0; margin: 50px auto;  background-color: darkseagreen; text-align: center;
}
.radio-2 label { display: inline-block; width: 28px;            height: 28px; overflow: hidden; border: 1px solid #eeeeee;            border-radius: 100%; margin-right: 10px;  background-color: #ffffff; position: relative;cursor: pointer;
}
.radio-2 label:after { content: ""; position: absolute;top: 4px; left: 4px; width: 20px; height: 20px;  background-color: #666666; border-radius: 50%;  transform: rotate(-180deg);transform-origin: -2px 50%; transition: transform .2s ease-in;
}        .radio-2 [type="radio"] {            display: none;
}
 
.radio-2 [type="radio"]:checked + label:after{
transform: rotate(0deg);            transition: transform .2s ease-out;
}    </style></head><body><div>
<input type="radio" name="radio-2" id="radio-2-1" checked="checked">
<label for="radio-2-1"></label>
<input type="radio" name="radio-2" id="radio-2-2">
<label for="radio-2-2"></label>
<input type="radio" name="radio-2" id="radio-2-3">
<label for="radio-2-3"></label></div></body><ml>

Je pense que vous avez lu ceci. Tous deux ont déjà compris comment implémenter les effets d'animation de boutons radio en CSS3. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture connexe :

Comment utiliser CSS3 pour créer des effets d'icônes

Comment convertir l'encodage CSS

Comment utiliser la toile pour réaliser l'interaction entre la balle et la souris

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!