Heim > Artikel > Web-Frontend > So erzielen Sie in CSS3 einen Animationseffekt zur Streckung nach links und rechts
So erzielen Sie in CSS3 einen Animationseffekt zur Streckung nach links und rechts
- WBOYOriginal
- 2021-12-14 17:57:303745Durchsuche
Methode: 1. Verwenden Sie die Anweisung „element {animation: name time}“, um die Animation an das Element zu binden. 2. Verwenden Sie die Anweisung „@keyframes name {50%{transform:scale(left and right scaling multiple, 1); }}"-Anweisung: Legen Sie die Animationsaktion der Expansion und Kontraktion des Elements fest, um den linken und rechten Expansions- und Kontraktionsanimationseffekt des Elements zu erzielen.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So erzielen Sie in CSS3 einen Animationseffekt mit Streckung nach links und rechts.
Wenn Sie in CSS eine Streckungsanimation nach links und rechts erzielen möchten, müssen Sie die Animation über das Animationsattribut an das Bildelement binden und die Animation angeben Zeit.
Verwenden Sie dann Keyframes-Regeln, um die Aktionen der Elementanimation festzulegen. Die spezifischen Aktionen basieren auf dem Transformationsattribut und der Skalierungsfunktion zum Skalieren der Elemente.
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;
margin:0 auto;
background-color:pink;
animation:fadenum 5s;
}
@keyframes fadenum{
50%{transform:scale(3,1);}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Ausgabeergebnis:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo erzielen Sie in CSS3 einen Animationseffekt zur Streckung nach links und rechts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!