Heim > Artikel > Web-Frontend > So erzielen Sie einen Animationseffekt durch Ändern der Breite in CSS3
So erzielen Sie einen Animationseffekt durch Ändern der Breite in CSS3
- WBOYOriginal
- 2021-12-15 12:12:567210Durchsuche
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.
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;
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>Ausgabeergebnis:
(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!