So erzielen Sie einen Animationseffekt durch Ändern der Breite in CSS3-CSS-Tutorial-php.cn

So erzielen Sie einen Animationseffekt durch Ändern der Breite in CSS3

WBOY

Freigeben： 2021-12-15 12:12:56

Original

7274 Leute haben es durchsucht

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 {100%{width: width value;}}“, um die Animation festzulegen Aktion zum Ändern der Breite des Elements, um den Animationseffekt der Änderung der Breite des Elements zu erzielen.

So erzielen Sie einen Animationseffekt durch Ändern der Breite in CSS3

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

So erzielen Sie den Animationseffekt durch Ändern der Breite von CSS3

In CSS können Sie das Animationsattribut und die @keyframes-Regel verwenden, um den Animationseffekt durch Ändern der Breite des Elements über @keyframes zu erzielen Regel können Sie Animationen erstellen.

Das Prinzip beim Erstellen von Animationen besteht darin, einen Satz von CSS-Stilen schrittweise in einen anderen Satz von Stilen umzuwandeln. Sie können diesen Satz von CSS-Stilen während der Animation mehrmals ändern.

Geben Sie den Zeitpunkt an, zu dem die Änderung eintritt, als Prozentsatz oder über die Schlüsselwörter „von“ und „bis“, die 0 % und 100 % entsprechen. 0 % ist die Startzeit der Animation, 100 % ist die Endzeit der Animation. Für eine optimale Browserunterstützung sollten Sie immer 0 %- und 100 %-Selektoren definieren.

Verwenden Sie das width-Attribut, um die Animationsaktion festzulegen. Mit dieser Eigenschaft wird die Breite des Elements festgelegt. Das Syntaxformat des

animation-Attributs lautet wie folgt:

animation: name duration timing-function delay iteration-count direction;

Nach dem Login kopieren

Das Beispiel lautet wie folgt:

<!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{
   100%{width:300px;}
}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Nach dem Login kopieren

Ausgabeergebnis:

So erzielen Sie einen Animationseffekt durch Ändern der Breite in CSS3

(Freigabe von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen Animationseffekt durch Ändern der Breite in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!