Heim > Artikel > Web-Frontend > So erstellen Sie in CSS3 einen 360-Grad-Rotationseffekt beim Bewegen der Maus
So erstellen Sie in CSS3 einen 360-Grad-Rotationseffekt beim Bewegen der Maus
- WBOYOriginal
- 2022-03-30 11:48:313039Durchsuche
Methode: 1. Verwenden Sie „element:hover{animation:name time;}“, um den Animationsstil zu binden, wenn die Maus schwebt; 2. Verwenden Sie „keyframes name {100%{transform:rotate(360deg);}}“ Geben Sie einfach eine 360-Grad-Rotationsaktion an.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So erstellen Sie mit CSS3 einen 360-Grad-Rotationseffekt beim Bewegen der Maus
Schritt 1: Verwenden Sie den :hover-Selektor, um den Stil des Elements festzulegen, wenn die Maus schwebt.
: Ein besonderer Stil, der durch Hover hinzugefügt wird, wenn die Maus über einen Link bewegt wird.
Tipp: Der :hover-Selektor kann für alle Elemente verwendet werden, nicht nur für Links.
Das Animationsattribut kann einen Animationsstil an ein Element binden.
Schritt 2: Verwenden Sie Keyframes-Regeln und transform:rotate, um die 360-Grad-Drehung des Elements festzulegen.
Mit @keyframes-Regeln können Sie Animationen erstellen.
Erstellen Sie Animationen, indem Sie schrittweise von einer CSS-Stileinstellung zur anderen wechseln.
Sie können die CSS-Stileinstellungen während des Animationsprozesses mehrmals ändern.
Geben Sie an, wann die Änderung erfolgt, indem Sie % oder die Schlüsselwörter „von“ und „bis“ verwenden, die 0 % bis 100 % entsprechen.
Das Beispiel sieht wie folgt aus:
<html>
<head>
<style>
div{
width:100px;
height:100px;
background-color:pink;
}
div:hover{
animation:fadenum 3s;
}
@keyframes fadenum{
100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<div>360度</div>
</body>
</html>Ausgabeergebnis:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo erstellen Sie in CSS3 einen 360-Grad-Rotationseffekt beim Bewegen der Maus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!