Heim > Artikel > Web-Frontend > So stellen Sie die Maus so ein, dass sie hineinzoomt und verschwindet, nachdem sie in CSS3 durch die abgerundeten Ecken geführt wurde
So stellen Sie die Maus so ein, dass sie hineinzoomt und verschwindet, nachdem sie in CSS3 durch die abgerundeten Ecken geführt wurde
- WBOYOriginal
- 2022-06-14 16:32:131587Durchsuche
Methode: 1. Verwenden Sie den „:hover“-Selektor, um den Stil festzulegen, wenn die Maus über das Element fährt. Die Syntax lautet „element:hover{Stilcode}“ 2. Verwenden Sie „element {animation: name time“ in den Stilcode, wenn die Maus darüber fährt. }“-Anweisung, um die Animation an das Element zu binden; 3. Verwenden Sie die „@keyframes fadenum{100%{border-radius:0;}}“-Anweisung, um den Effekt der Vergrößerung des gerundeten Elements festzulegen Ecken, bis sie verschwinden.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So stellen Sie ein, dass die Maus nach dem Vergrößern der abgerundeten Ecke in CSS3 verschwindet.
1. Festlegen des Stils des :hover-Pseudoklassenselektors
In CSS ist :hover ein Pseudoklassenselektor -Klassenselektor wird verwendet, wenn die Maus auf das Element bewegt wird. Fügt diesem Element einen speziellen Stil hinzu. Der :hover-Selektor gilt für alle Elemente.
: Ein besonderer Stil, der durch Hover hinzugefügt wird, wenn die Maus über einen Link bewegt wird.
Im IE muss „“ deklariert werden, um sicherzustellen, dass der Selektor „:hover“ wirksam sein kann Animationseigenschaften:
Animationsname
- Animationsdauer
- Animations-Timing-Funktion
- Animationsverzögerung
- Animations-Iterationsanzahl
- Animationsrichtung
-
- 3. Verwenden Sie @keyframes, um Animationen festzulegen
Das Prinzip beim Erstellen von Animationen besteht darin, einen Satz von CSS-Stilen schrittweise in einen anderen Satz von Stilen umzuwandeln.
Sie können diesen Satz CSS-Stile während des Animationsprozesses mehrmals ändern.
Geben Sie den Zeitpunkt an, zu dem die Änderung eintritt, als Prozentsatz oder über die Schlüsselwörter „von“ und „bis“, die 0 % und 100 % entsprechen.
0 % ist die Startzeit der Animation, 100 % ist die Endzeit der Animation.
Für eine optimale Browserunterstützung sollten Sie immer 0 %- und 100 %-Selektoren definieren.
Das Beispiel sieht wie folgt aus:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
div
{
width: 80px;
height: 50px;
background:pink;
border:1px solid #000;
border-radius:50%;
}
div:hover
{
animation:fadenum 5s;
}
@keyframes fadenum{
100%{border-radius:0;}
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Ausgabeergebnis:
(Freigabe von Lernvideos:CSS-Video-Tutorial
,HTML-Video-Tutorial
)
Das obige ist der detaillierte Inhalt vonSo stellen Sie die Maus so ein, dass sie hineinzoomt und verschwindet, nachdem sie in CSS3 durch die abgerundeten Ecken geführt wurde. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!