Heim > Artikel > Web-Frontend > So erzielen Sie in CSS3 einen Maus-Hover-Stopp-Animationseffekt
So erzielen Sie in CSS3 einen Maus-Hover-Stopp-Animationseffekt
- WBOYOriginal
- 2021-12-10 09:54:538426Durchsuche
In CSS können Sie den Selektor „:hover“ und das Attribut „animation-play-state“ verwenden, um den Animationseffekt „Maus-Hover-Stopp“ zu erzielen. Die Syntax lautet „animation element:hover{animation-play-state:paused;“. }".
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So erzielen Sie den Maus-Hover-Stopp-Animationseffekt in CSS3
In CSS können Sie das Animationsattribut verwenden, um Animationen an Elemente zu binden, und dann @keyframes-Regeln verwenden, um den Animationsvorgang festzulegen.
Wenn wir eine Animation abspielen und die Animation anhalten möchten, müssen wir das Attribut „animation-play-state“ verwenden. Das Attribut „animation-play-state“ hat zwei Werte: „paused“: pausiert die Animation; „running“: spielt die Animation weiter ab
Wir können den Status anhalten, wenn die Maus über das Element schwebt.
Schauen wir uns das anhand eines Beispiels an. Das Beispiel sieht wie folgt aus:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width:100px;
height:100px;
background-color:pink;
animation:fadenum 5s infinite;
}
@keyframes fadenum{
100%{transform:rotate(360deg);}
}
div:hover{
animation-play-state:paused;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Ausgabeergebnis:
Wenn Sie interessiert sind, können Sie weiterhin Folgendes besuchen: CSS-Video-Tutorial.
Das obige ist der detaillierte Inhalt vonSo erzielen Sie in CSS3 einen Maus-Hover-Stopp-Animationseffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!