Reines CSS, um einen bewölkten Wettersymboleffekt zu erzielen

Wirkung

Die Wirkung ist wie folgt

​

Umsetzungsideen

1. Verwenden Sie die Box-Shadow-Eigenschaft, um mehrere graue Kreise zu zeichnen und diese zu einem dunklen Wolkenmuster zu kombinieren.
2. nach Pseudoelement schreibt den Schatten unter die dunklen Wolken
3. Animation hinzufügen

DOM-Struktur

Verwenden Sie zwei verschachtelte Div-Container. Der übergeordnete Container steuert die Anzeigeposition des Symbols und der untergeordnete Container wird zum Schreiben des Stils der dunklen Wolken verwendet.

<div Klasse="Container">
    <div Klasse="bewölkt"></div>
</div>

CSS-Stile

1. Übergeordneter Containerstil, fügen Sie der gesamten Seite eine Hintergrundfarbe hinzu, um eine einfache Vorschau zu ermöglichen

Körper{
    Hintergrund: rgba(73, 74, 95, 1);
}
.Container{
    Breite: 170px;
    Höhe: 170px;
    Position: relativ;
    Rand: 250px automatisch;
}

2. Der Stil der dunklen Wolken. Die dunklen Wolken haben eine Animation, bei der sie sich auf und ab bewegen. Der Schlüssel liegt hier in der Verwendung der Box-Shadow-Eigenschaft. Wenn es weiß ist, kann es als Symbol für bewölktes Wetter verwendet werden.

.wolkig{
    Breite: 50px;
    Höhe: 50px;
    Position: absolut;
    oben: 70px;
    links: 80px;
    Rand links: -60px;
    Hintergrund: #ccc;
    Randradius: 50 %;
    Kastenschatten: #ccc 65px -10px 0 -5px,
        #ccc 25px -25px,
        #ccc 30px 10px,
        #ccc 60px 15px 0 -10px,
        #ccc 85px 5px 0 -5px;
    Animation: bewölkt, 5 s, unendliches Ein- und Ausblenden;
}
@keyframes bewölkt{
    50 %{
        transformieren: übersetzenY(-20px);
    }
}

3. Für den Projektionsstil können Sie das Pseudoelement „after“ verwenden. Vergessen Sie nicht, dass es auch eine bewegte Animation gibt.

.cloudy::nach{
    Inhalt: '';
    Breite: 120px;
    Höhe: 15px;
    Position: absolut;
    unten: -60px;
    links: 5px;
    Hintergrund: #000;
    Randradius: 50 %;
    Deckkraft: 0,2;
    Animation: Wolkenschatten, 5 s, unendliches Ein- und Ausblenden;
    transformieren: Skalierung (0,7);
}

@keyframes wolkig-schatten
    50 %{
        transformieren: verschiebeY(20px) skalieren(1);
        Deckkraft: 0,05;
    }
}

OK, fertig. Befolgen Sie die Schritte und Sie können das bewölkte Wettersymbol auch auf Ihrer Seite implementieren ~

Zusammenfassen

Das Obige ist das reine CSS, das ich Ihnen vorgestellt habe, um den bewölkten Wettersymboleffekt zu erzielen. Ich hoffe, es 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!