Ein Beispiel zum Schreiben eines großen Sonnenwettersymbols in reinem CSS

<div Klasse="Container">
    <div Klasse="sonnig"></div>
</div>

Körper{
    Hintergrund: rgba(73, 74, 95, 1);
}

.Container{
    Breite: 170px;
    Höhe: 170px;
    Position: relativ;
    Rand: 250px automatisch;
}

.sonnig{
    Breite: 20px;
    Höhe: 140px;
    Position: absolut;
    oben: 20px;
    links: 90px;
    Hintergrund: -webkit-linear-gradient(oben, rgba(255,255,255,0) 0 %, rgba(255,255,255,0,8) 50 %, rgba(255,255,255,0) 100 %);
    Animation: sonnig 15 s linear unendlich;
}

@keyframes sonnig {
    0 %{
        transformieren: drehen (0 Grad);
    }
    100 %{
        transformieren: drehen (360 Grad);
    }
}

.sunny::before{
    Inhalt: '';
    Breite: 20px;
    Höhe: 140px;
    Position: absolut;
    unten: 0;
    links: 0;
    Hintergrund: -webkit-linear-gradient(oben, rgba(255,255,255,0) 0 %, rgba(255,255,255,0,8) 50 %, rgba(255,255,255,0) 100 %);
    transformieren: drehen (90 Grad)
}

.sonnig::nach{
    Inhalt: '';
    Breite: 80px;
    Höhe: 80px;
    Position: absolut;
    oben: 30px;
    links: -30px;
    Hintergrund: #ffee44;
    Randradius: 50 %;
    Box-Schatten: rgba(255,255,0,0,2) 0 0 0 15px;
}