So erzielen Sie mit CSS3 den Effekt fallender Schneeflocken-CSS-Tutorial-php.cn

So erzielen Sie mit CSS3 den Effekt fallender Schneeflocken

清浅

Freigeben： 2018-12-12 09:04:14

Original

6189 Leute haben es durchsucht

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

So erzielen Sie mit CSS3 den Effekt fallender 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

So erzielen Sie mit CSS3 den Effekt fallender Schneeflocken

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;

Nach dem Login kopieren

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(&#39;images/xuehua.png&#39;);
            -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>

Nach dem Login kopieren

Die Darstellung ist wie folgt:

So erzielen Sie mit CSS3 den Effekt fallender Schneeflocken

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!