Heim > Artikel > Web-Frontend > So stellen Sie das Element so ein, dass es klickt, um anzuhalten, wenn es sich in CSS3 um 360 Grad dreht
So stellen Sie das Element so ein, dass es klickt, um anzuhalten, wenn es sich in CSS3 um 360 Grad dreht
- WBOYOriginal
- 2021-12-08 17:17:234003Durchsuche
Methode: 1. Verwenden Sie das Animationsattribut, um eine Schleifenrotationsanimation an das Element zu binden. 2. Verwenden Sie die @keyframes-Regel, um die Rotationsaktion der Animation festzulegen. 3. Verwenden Sie den „Element: active{animation-play-state;“ :paused}“-Anweisung zum Festlegen der Elementschleife. Klicken Sie während der Drehung auf das Element, um die Drehung zu stoppen.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So stellen Sie das Element so ein, dass es durch Klicken anhält, wenn es sich in CSS3 um 360 Grad dreht.
In CSS können Sie das Animationsattribut verwenden, um eine kreisförmige Rotationsanimation an das Element zu binden und dann @keyframes-Regeln zu verwenden Legen Sie die Rotationsaktion der Animation fest.
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 es über den aktiven Selektor festlegen:
<!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:active{
animation-play-state:paused;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Ausgabeergebnis:
(Video-Sharing lernen: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo stellen Sie das Element so ein, dass es klickt, um anzuhalten, wenn es sich in CSS3 um 360 Grad dreht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!