Beispielcode zur Implementierung des Regentropfen-Animationseffekts mit CSS

Glasfenster

Was wir heute erreichen werden, ist der Regentropfeneffekt. Bevor wir jedoch den Regentropfeneffekt erreichen, erzeugen wir zunächst den Milchglaseffekt. Ohne Glasfenster dringt der Regen ins Haus ein und es gibt nichts, woran er klopfen kann.

<div Klasse='Fenster'></div>
.Fenster {
            Position: absolut;
            Breite: 100vw;
            Höhe: 100vh;
            Hintergrund: URL("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg");
            Hintergrundgröße: Abdeckung;
            Hintergrundposition: 100 %;
            Filter: Unschärfe (10px);
}

Tatsächlich geht es darum, einem Bild einen unscharfen Effekt zu verleihen, der wie Milchglas aussieht.

Ein Tropfen Regen

Der Effekt von Regentropfen ist sehr raffiniert. Schauen wir uns den Gesamteffekt eines Regentropfens an.

Dieser Regentropfen ist eigentlich in zwei Teile geteilt. Der erste Teil ist der Schatten unten, der eigentlich ein Rand ist. Der Code lautet wie folgt:

.Grenze {
            Position: absolut;
            Rand links: 92px;
            Rand oben: 51px;
            Randradius: 100 %;
            Kastenschatten: 0 0 0 2px rgba (0, 0, 0, 0,6);
            transformieren: drehenY(0);
            Breite: 20px;
            Höhe: 28px;
}

<div Klasse='Rand'></div>

Der Rand wird durch die Attribute width und height sowie border-radius in eine Ellipse gezogen und anschließend der Schatten mit box-shadow als Schatten des Wassertropfens herausgezogen. Der endgültige Effekt des Randes ist wie folgt:

Dann gibt es noch den Wassertropfenteil

.Regentropfen {
            Filter: Helligkeit (1,2);
            Position: absolut;
            Rand links: 90px;
            Rand oben: 50px;
            Hintergrundgröße: 5vw 5vh;
            Randradius: 100 %;
            Hintergrundbild: URL("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg");
            transformieren: drehen(180 Grad) drehenY(0);
            Hintergrundposition: 48,1994160428 % 54,3259834959 %;
            Breite: 24px;
            Höhe: 28px;
}
<div Klasse = 'Regentropfen'></div>

• Der Wassertropfen verwendet ein Hintergrundbild, um das Glasbild als Reflexion festzulegen. Der Grund, warum die Reflexion eine Reflexion ist, liegt darin, dass der Schatten auf dem Kopf steht. Daher wird das Bild mithilfe von rotate() von transform um 180 Grad gedreht, was genau umgekehrt ist.
• Indem Sie die Position des Bildes im Wassertropfen über die Hintergrundposition festlegen, erscheinen die Reflexionen der verschiedenen Wassertropfen dahinter unterschiedlich, da sich die Position des Bildes unterschiedlich ändert, was ihm ein realistisches Aussehen verleiht.
• Die Breite des Regentropfens ist einige Pixel größer als die Breite des Rahmens, sodass beide Seiten des Wassertropfens den Rahmen bedecken und nur an der Ober- und Unterseite des Rahmens Schatten zu sehen sind.
• Der linke und obere Rand des Regentropfens unterscheiden sich geringfügig von denen des Rands, sodass der Regentropfen auf dem Rand zentriert werden kann und die Verschmelzung von Wassertropfen und Schatten realistischer wirkt.

Die Wirkung eines einzelnen Wassertropfens ohne Schatten ist wie folgt:

Zufällige Regentropfen

Regen fällt nie tropfenweise und auch nicht in einem regelmäßigen Muster. Um Regentropfen zufällig auf den Glasfenstern erscheinen zu lassen, wird das CSS-Doodle-Framework verwendet.

<css-doodle use="var(--rule)"></css-doodle>

Erstellen Sie zunächst eine benutzerdefinierte Komponente von CSS-Doodle

--Regel: ( :doodle {
     @Raster: 10x10/100 %;
     Überlauf: sichtbar;
}

Erstellen Sie ein 10*10-Raster, so dass höchstens 100 Regentropfen erscheinen können

transform: scale(@rand(.5, .9));

Verwenden Sie transform:scale, um Regentropfen zufällig größer oder kleiner zu machen

:vor {
    Inhalt: '';
    Position: absolut;
    Rand links: @var(--mleft);
    Rand oben: @var(--mtopb);
    Randradius: 100 %;
    Kastenschatten: 0 0 0 @var(--shadow-size) rgba(0, 0, 0, 0,6);
    transformieren: drehenY(0);
    Breite: @var(--widthb);
    Höhe: @var(--height);
}

:nach {
    Inhalt: '';
    Filter: Helligkeit (1,2);
    Position: absolut;
    Rand links: @var(--mleft);
    Rand oben: @var(--mtopa);
    Hintergrundgröße: 5vw 5vh;
    Randradius: 100 %;
    Hintergrundbild: URL("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg");
    transformieren: drehen(180 Grad) drehenY(0);
    Hintergrundposition: @r(1%, 100%) @r(1%, 100%);
    Breite: @var(--widtha);
    Höhe: @var(--height);
 }

Kommen Ihnen die :before und :after hier bekannt vor? Tatsächlich ist der Inhalt in :before der Stil der vorherigen Umrandung und der Inhalt in :after der Stil des vorherigen Regentropfens. Inhalt ist erforderlich, denn wenn das Attribut „Inhalt“ im Pseudoelement (vorher, nachher) nicht festgelegt ist, ist das Pseudoelement nutzlos und die gesamte Konfiguration in :vorher und :nachher ist ungültig. Um die Regentropfen klarer erscheinen zu lassen, wird der Filter „Helligkeit (1,2)“ hinzugefügt, um die Regentropfen heller erscheinen zu lassen.

Das Seltsame hier ist @var(), was eigentlich eine CSS-Variable ist. Es ist in css-doodle gekapselt und hat die gleiche Funktion wie var() von CSS. Sehen wir uns die Definitionen dieser Variablen an.

--Größe:(4 + @r(1, 8));
--Schattengröße: calc(((@var(--size)*0.3) - 1)*1px);
--mleft:@r(1, 100)px;
--mtop:@r(1, 100);
--mtop1:(@var(--mtop) - 1);
--mtopb:calc(@var(--mtop)*1px);
--mtopa:calc(@var(--mtop1)*1px);
--Höhe:@r(15, 25)px;
--width:@r(8, 20);
--width1:(@var(--width) + 5);
--widthb:calc(@var(--width)*1px);
--widtha:calc(@var(--width1)*1px);

Hier sind einige Fallstricke zur Erklärung:

Falle Nr. 1: css-doodle stellt @calc() bereit, aber die Berechnung hier muss trotzdem calc() von CSS verwenden und die Verwendung von @calc() ist ungültig.
Fehler Nr. 2: Bei der Verwendung von @var für Addition und Subtraktion müssen zwischen den + und - Zeichen Leerzeichen stehen, sonst ist die Berechnung ungültig. Denken Sie daran.
Nr. 3 ist keine Falle: Wie addiert man nach der Berechnung des Wertes px-Einheiten? Verwenden Sie einfach calc(value*1px). Diese Methode kann auch für andere Einheiten verwendet werden.
Erklärung Nr. 4: Warum Variablen verwenden? Dies liegt daran, dass „vorher“ und „nachher“ nicht zusammenpassen. Um die Eigenschaften „Rand links“, „Rand oben“, „Breite“, „Höhe“ und andere Eigenschaften von Rahmen und Regentropfen konsistent zu halten, müssen Sie Variablen verwenden, um sie außerhalb von „vorher“ und „nachher“ zu definieren und die Werte darin zu übergeben.

Der endgültige Effekt ist wie folgt:

Wie kann ich ohne Animation an mein Fenster klopfen?

Wenn die Regentropfen einfach auf das Fenster fielen, hätte man kein Klopfen verspürt. Um das Klopfen widerzuspiegeln, habe ich beschlossen, die Regentropfen zu bewegen.

:vor {
    Inhalt: '';
    Position: absolut;
    Rand links: @var(--mleft);
    Rand oben: @var(--mtopb);
    Randradius: 100 %;
    Kastenschatten: 0 0 0 @var(--shadow-size) rgba(0, 0, 0, 0,6);
    transformieren: drehenY(0);
    Breite: @var(--widthb);
    Höhe: @var(--height);
    Deckkraft: 0;
    Animation: Regentropfen fallen 500 ms, Kubik-Bézier (0,175, 0,885, 0,32, 1,275);
    Animationsfüllmodus: vorwärts;
    Animationsverzögerung: @var(--delay);
}
:nach {
    Inhalt: '';
    Filter: Helligkeit (1,2);
    Position: absolut;
    Rand links: @var(--mleft);
    Rand oben: @var(--mtopa);
    Hintergrundgröße: 5vw 5vh;
    Randradius: 100 %;
    Hintergrundbild: URL("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg");
    transformieren: drehen(180 Grad) drehenY(0);
    Hintergrundposition: @r(1%, 100%) @r(1%, 100%);
    Breite: @var(--widtha);
    Höhe: @var(--height);
    Deckkraft: 0;
    Animation: Regentropfen fallen 500 ms, Kubik-Bézier (0,175, 0,885, 0,32, 1,275);
    Animationsfüllmodus: vorwärts;
    Animationsverzögerung: @var(--delay);
}

Der entscheidende Punkt ist, dass die letzten drei Zeilen in :before und :after verwendet werden, um den Animationseffekt zu erzielen.

cubic-bezier() steuert die Geschwindigkeit der Animation und macht den Effekt von Regentropfen, die auf das Glasfenster fallen, realistischer.

animation-delay Der Zeitpunkt, zu dem die Regentropfen erscheinen, ist zufällig, was ebenfalls dazu dient, den Effekt realistischer zu gestalten. Realistische Effekte sind wirklich problematisch.

Werfen wir einen Blick auf die @keyframe-Einstellungen von raindrop-fall

@keyframes Regentropfen-Fall {
    0% {
        Deckkraft: 0;
        transformieren: drehen (180 Grad) skalieren (2,5, 2,3) drehenY (0);
    }
    100 % {
        Deckkraft: 1;
        transformieren: drehen(180 Grad) skalieren(1, 1) drehenY(0);
    }
}

Zusammenfassen

Oben ist der Beispielcode, den ich Ihnen vorgestellt habe, um mithilfe von CSS Regentropfen-Animationseffekte zu erzielen. Ich hoffe, er wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!