曇り空のアイコン効果を実現する純粋な CSS

<div class="コンテナ">
    <div class="cloudy"></div>
</div>

体{
    背景: rgba(73, 74, 95, 1);
}
。容器{
    幅: 170ピクセル;
    高さ: 170ピクセル;
    位置: 相対的;
    マージン: 250px 自動;
}

。曇り{
    幅: 50px;
    高さ: 50px;
    位置: 絶対;
    上: 70px;
    左: 80px;
    左マージン: -60px;
    背景: #ccc;
    境界線の半径: 50%;
    ボックスシャドウ: #ccc 65px -10px 0 -5px,
        #ccc 25px -25px、
        #ccc 30px 10px、
        #ccc 60px 15px 0 -10px、
        #ccc 85px 5px 0 -5px;
    アニメーション: 曇り、5 秒、ease-in-out、無限。
}
@keyframes 曇り{
    50%{
        変換: translateY(-20px);
    }
}

.cloudy::after{
    コンテンツ： '';
    幅: 120ピクセル;
    高さ: 15px;
    位置: 絶対;
    下: -60px;
    左: 5px;
    背景: #000;
    境界線の半径: 50%;
    不透明度: 0.2;
    アニメーション: cloudy-shadow 5s easy-in-out infinite;
    変換: スケール(0.7);
}

@keyframes 曇りの影
    50%{
        変換: translateY(20px) スケール(1);
        不透明度: 0.05;
    }
}