大きな太陽の天気アイコンを純粋な CSS で記述する方法の例

<div class="コンテナ">
    <div class="晴れ"></div>
</div>

体{
    背景: rgba(73, 74, 95, 1);
}

。容器{
    幅: 170ピクセル;
    高さ: 170ピクセル;
    位置: 相対的;
    マージン: 250px 自動;
}

.晴れ{
    幅: 20px;
    高さ: 140px;
    位置: 絶対;
    上: 20px;
    左: 90px;
    背景: -webkit-linear-gradient(上、rgba(255,255,255,0) 0%、rgba(255,255,255,0.8) 50%、rgba(255,255,255,0) 100%);
    アニメーション: 晴れ 15 秒 リニア 無限;
}

@keyframes 晴れ {
    0%{
        変換: 回転(0度);
    }
    100%{
        変換: 回転(360度);
    }
}

.晴れ::前{
    コンテンツ： '';
    幅: 20px;
    高さ: 140px;
    位置: 絶対;
    下部: 0;
    左: 0;
    背景: -webkit-linear-gradient(上、rgba(255,255,255,0) 0%、rgba(255,255,255,0.8) 50%、rgba(255,255,255,0) 100%);
    変換: 回転(90度)
}

.晴れ::後{
    コンテンツ： '';
    幅: 80ピクセル;
    高さ: 80px;
    位置: 絶対;
    上: 30px;
    左: -30px;
    背景: #ffee44;
    境界線の半径: 50%;
    ボックスシャドウ: rgba(255,255,0,0.2) 0 0 0 15px;
}