Heim >Web-Frontend >CSS-Tutorial >So implementieren Sie Rotations- und Verschiebungsanimationen in CSS3

So implementieren Sie Rotations- und Verschiebungsanimationen in CSS3

WBOY
WBOYOriginal
2021-12-16 15:25:374236Durchsuche

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.

So implementieren Sie Rotations- und Verschiebungsanimationen in CSS3

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:

So implementieren Sie Rotations- und Verschiebungsanimationen in CSS3

(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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn