Heim > Artikel > Web-Frontend > So erzielen Sie Rotations- und Skalierungsanimationseffekte in CSS3
So erzielen Sie Rotations- und Skalierungsanimationseffekte in CSS3
- WBOYOriginal
- 2021-12-16 11:45:542435Durchsuche
Methode: 1. Verwenden Sie die Anweisung „element {animation: name time}“, um die Rotations- und Skalierungsanimation an das Element zu binden. 2. Verwenden Sie „@keyframes name {100%{transform:rotate(rotation angle) scale(scale ratio);} }"-Anweisung, um den Rotations- und Skalierungsanimationseffekt zu erzielen.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So erzielen Sie Rotations- und Skalierungsanimationseffekte in CSS3
In CSS können Sie das Animationsattribut verwenden, um Rotations- und Skalierungsanimationen 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 „Scale()“, um die Elementskalierung 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;
margin:0 auto;
animation:fadenum 5s;
}
@keyframes fadenum{
100%{transform:rotate(180deg) scale(0.5,0.5);}
}
</style>
</head>
<body>
<div class="div1">这是一个旋转缩放的效果</div>
</body>
</html>Ausgabeergebnis:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo erzielen Sie Rotations- und Skalierungsanimationseffekte in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!