Heim > Artikel > Web-Frontend > So implementieren Sie Rotations- und Verschiebungsanimationen in CSS3
So implementieren Sie Rotations- und Verschiebungsanimationen in CSS3
- WBOYOriginal
- 2021-12-16 15:25:374204Durchsuche
Methode: 1. Verwenden Sie das Animationsattribut, um die Animation an das Element zu binden. 2. Verwenden Sie die Anweisung „@keyframes name {100%{transform:rotate (rotation angle) translator (displacement distance);}}“, um die Drehung festzulegen und Verschiebung des Elements Aktions-Keyframes, um Rotations- und Verschiebungsanimationseffekte zu erzielen.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So implementieren Sie Rotations- und Verschiebungsanimationen in CSS3
In CSS können Sie das Animationsattribut verwenden, um Rotations- und Verschiebungsanimationen an Elemente zu binden.
Verwenden Sie die @keyframes-Regel, um die Animationsaktions-Keyframes des Elements festzulegen, verwenden Sie das Transformationsattribut mit der Funktion „Rotate()“, um die Elementrotationsaktion festzulegen, und verwenden Sie das Transformationsattribut mit der Funktion „Translate()“, um die Elementverschiebung festzulegen Aktion.
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>
.div1{
width:100px;
height:100px;
background:pink;
border-radius:50%;
margin:0 auto;
animation:fadenum 5s;
}
@keyframes fadenum{
0%{transform:rotate(360deg) translateX(-200px);}
}
</style>
</head>
<body>
<div class="div1">这是一个旋转加位移的效果</div>
</body>
</html>Ausgabeergebnis:
(Teilen von Lernvideos: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo implementieren Sie Rotations- und Verschiebungsanimationen in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!