Heim > Artikel > Web-Frontend > So erzielen Sie mit CSS3 den Effekt fallender Schneeflocken
So erzielen Sie mit CSS3 den Effekt fallender Schneeflocken
- 清浅Original
- 2018-12-05 14:52:246196Durchsuche
Verwenden Sie das Animationsattribut in CSS3, um den Animationsnamen, die Animationszeit und die Geschwindigkeit festzulegen und ob die Animation wiederholt wird, um den Effekt von fallendem Schnee zu erzielen
Was ich heute mitteilen werde, ist die Verwendung des Animationsattributs in CSS3, um den Effekt fallender Schneeflocken zu erzielen. Es hat einen gewissen Referenzeffekt und ich hoffe, dass es für alle hilfreich ist.
[Empfohlener Kurs: CSS3-Tutorial]
Produktion Hintergrundbild
Mit der Zeichensoftware auf dem Computer können wir das gewünschte Muster zeichnen, z. B. kleine Sterne, Schneeflocken, Herzen usw. Zeichnen Sie in diesem Beispiel einen schwarzen Hintergrund auf die Leinwand und zeichnen Sie dann Schneeflocken
Programmieridee:
Fügen Sie zuerst den Körper A hinzu Farbe, die mit der Hintergrundfarbe des Bildes übereinstimmt, und verwenden Sie dann position: Fixed, um ein absolut positioniertes Element zu generieren, positionieren Sie es relativ zum Browserfenster und setzen Sie dann seine oberen, unteren, linken und rechten Werte auf 0 , damit die Bilder eng zusammenpassen, verwenden Sie abschließend das Animationsattribut, um den Animationseffekt festzulegen
Wir können die Animation entsprechend dem gewünschten Animationseffekt einstellen. wie in diesem Beispiel:
Stellen Sie den Animationsnamen auf xuehua, die Animationsabschlusszeit auf 15 Sekunden, die Animationsgeschwindigkeit so ein, dass sie vom Anfang bis zum Ende gleich bleibt, und die Animation wird in a abgespielt drahtlose Schleife
animation: xuehua 15s linear infinite;
Programmcode
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
body{
background: #000;
}
#xuehua{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: url('images/xuehua.png');
-webkit-animation: xuehua15s linear infinite;
animation: snow 15s linear infinite;
}
@keyframes xuehua{
0% {
background-position: 0 0, 0 0;
}
100% {
background-position: 500px 1000px, 500px 500px;
}
}
@-webkit-keyframes xuehua{
0% {
background-position: 0 0, 0 0;
}
100% {
background-position: 500px 1000px, 500px 500px;
}
}
</style>
</head>
<body>
<div id="xuehua"></div>
</body>
</html>Die Darstellung ist wie folgt:
Zusammenfassung: Das Obige ist Der gesamte Inhalt dieses Artikels Ich hoffe, dass Sie durch diesen Artikel lernen können, Spezialeffekte fallender Schneeflocken zu erzeugen.
Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit CSS3 den Effekt fallender Schneeflocken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!