Heim >Web-Frontend >Front-End-Fragen und Antworten >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

WBOY
WBOYOriginal
2022-06-14 16:32:131614Durchsuche

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.

So stellen Sie die Maus so ein, dass sie hineinzoomt und verschwindet, nachdem sie in CSS3 durch die abgerundeten Ecken geführt wurde

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

Mit @keyframes-Regeln können Sie Animationen erstellen.

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-TutorialSo stellen Sie die Maus so ein, dass sie hineinzoomt und verschwindet, nachdem sie in CSS3 durch die abgerundeten Ecken geführt wurde)

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn