So implementieren Sie Optionsfeld-Animationseffekte in CSS3

Wie implementiert man Optionsfeld-Animationseffekte in CSS3? Warum müssen wir Optionsfeld-Animationseffekte implementieren? Lassen Sie uns Ihnen zwei Beispiele geben, die Ihnen helfen, die Verwendung von CSS3 zum Implementieren von Radio-Button-Animationseffekten zu beherrschen

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

Hier geben wir den Typwert des Eingabe-Tags als Radio an und listen alle Radios auf Die Namenswerte sind gleich, sodass der Einzelauswahleffekt erzielt werden kann. Was das for-Attribut in der Beschriftung hier betrifft, habe ich zunächst nicht verstanden, warum es so festgelegt wurde. Später habe ich nach der Definition dieses Attributs gesucht. Wie auch immer, die allgemeine Bedeutung ist, dass, solange dieses Attribut festgelegt ist Wir klicken auf das Beschriftungselement und durchsuchen. Der Empfänger verschiebt den Fokus automatisch auf das Radio. Als nächstes verwenden Sie CSS, um Effekte auf HTML festzulegen.

.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;
}

Hier sehen wir uns zunächst die Einstellungen des Beschriftungselements an. Das einzige unbekannte Attribut ist, dass die Maus verwendet wird Stil zum Zeiger: Wenn unsere Maus auf dem Beschriftungselement platziert wird, wird der Mausstil zu einer Hand (dies ist auf meinem Computer der Fall). Okay, schauen wir uns weiter an

.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;
}

Hier verwenden wir den After-Selektor. Warum dieses Attribut festlegen? Nur um den kleinen schwarzen Punkt wie im Bild oben zu setzen. Zuerst setzen wir das Inhaltsattribut auf leer, was bedeutet, dass wir es nicht mit Inhalten füllen müssen, da wir lediglich die Hintergrundfarbe auf Schwarz setzen möchten, das ist alles. Außerdem setzen wir zu Beginn den Skalierungswert der Transformation auf 0. Der Effekt besteht darin, die kleinen schwarzen Punkte auszublenden.

.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;
}

Beachten Sie, dass hier das +-Symbol verwendet wird. Was bedeutet es? Sein wissenschaftlicher Name heißt benachbarter Geschwisterselektor, was bedeutet, dass das Element unmittelbar nach einem anderen Element ausgewählt wird und beide das gleiche übergeordnete Element haben. Dies bedeutet, dass jemand die Beschriftung auswählen möchte, die nach dem Radio erscheint Wir haben das eingerichtet? Legen Sie einfach die Beschriftung direkt fest. Stellen Sie sich vor, dass wir in einem sehr großen System das Label-Element möglicherweise mehrmals verwenden. Um Verwirrung zu vermeiden, ist diese Einstellung genauer. Hier sehen wir das Übergangsattribut, mit dem der Übergangseffekt festgelegt wird. Zum Schluss noch unser Radio verstecken und fertig.

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

Dies ist unser zweiter Spezialeffekt

demo2.gif

Tatsächlich ist das erste Gefühl, wenn man diese Animation sieht, dass sie genau die gleiche ist wie die vorherige Eins, außer dass das Transformationsattribut auf Rotieren eingestellt ist. Solange Sie das vorherige Beispiel kombinieren, können Sie einen solchen Effekt leicht erstellen:

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

Ich glaube, Sie haben das gelesen. Beide haben bereits verstanden, wie man Optionsfeld-Animationseffekte in CSS3 implementiert. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie CSS3, um Symboleffekte zu erstellen

So konvertieren Sie die CSS-Codierung

Wie man Leinwand verwendet, um die Interaktion zwischen Ball und Maus zu realisieren

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Optionsfeld-Animationseffekte in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!