Heim > Artikel > Web-Frontend > Was ist der CSS3-Code für die Maus über ein gedrehtes Element?
Was ist der CSS3-Code für die Maus über ein gedrehtes Element?
- WBOYOriginal
- 2022-03-22 12:17:291903Durchsuche
Der Code lautet „Element:hover{animation:name time}@keyframes name{100%{transform:rotate(rotation angle);}}“; der Hover-Selektor legt den Stil der Maus, der Animation und der @keyframes fest Legen Sie die Elementanimation fest.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
Was ist der CSS3-Code für rotierende Elemente, wenn die Maus darüber fährt?
:Hover ist ein spezieller Stil, der hinzugefügt wird, wenn die Maus über einen Link bewegt wird.
: Der Hover-Selektor kann für alle Elemente verwendet werden, nicht nur für Links.
Sie können das Animationsattribut verwenden, um die Animation an ein Element zu binden. Die Syntax lautet:
animation: name duration timing-function delay iteration-count direction;
Wenn der Wert des Attributs auf „unendlich“ gesetzt ist. Es legt fest, dass die Animation unbegrenzt abgespielt werden kann. Wenn wir eine Rotationsanimation an ein Element binden, kann es sich weiter drehen.
Dann legen Sie die Rotationsaktion der Animation über @keyframes-Regeln fest.
Das Beispiel sieht wie folgt aus:
<html>
<head>
<style>
div{
width:100px;
height:100px;
background-color:pink;
}
div:hover{animation:fadenum 5s;}
@keyframes fadenum{
100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Ausgabeergebnis:
(Teilen von Lernvideos: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonWas ist der CSS3-Code für die Maus über ein gedrehtes Element?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!