Heim >Web-Frontend >CSS-Tutorial >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

WBOY
WBOYOriginal
2021-12-14 17:57:303856Durchsuche

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.

So erzielen Sie in CSS3 einen Animationseffekt zur Streckung nach links und rechts

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:

So erzielen Sie in CSS3 einen Animationseffekt zur Streckung nach links und rechts

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

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