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

効果

効果は以下のとおりです

実装のアイデア

box-shadow プロパティを使用して、複数の灰色の円を描画し、それらを組み合わせて暗い雲のパターンを形成します。
疑似要素が暗い雲の下に影を書いた後
アニメーションを追加

DOM構造

ネストされた div コンテナーを 2 つ使用します。親コンテナーはアイコンの表示位置を制御し、子コンテナーは暗い雲のスタイルを記述するために使用されます。

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

CSS スタイル

1. 親コンテナスタイル、ページ全体に背景色を追加して簡単にプレビューできるようにします

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

2. 暗い雲のスタイル。暗い雲は上下に動くアニメーションを持っています。ここで重要なのは、box-shadow プロパティの使用です。白の場合は、曇りの天気アイコンとして使用できます。

。曇り{
    幅: 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);
    }
}

3. 投影スタイルには、after 疑似要素を使用できます。動くアニメーションもあることを忘れないでください。

.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;
    }
}

はい、完了です。手順に従って、曇りの天気アイコンをページに実装することもできます〜

要約する

上記は曇り空のアイコン効果を実現するために私が紹介した純粋な CSS です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<: フロントエンド開発者に何百万ドルもの価値をもたらす 10 のスキル

>>: Django が uwsgi+nginx プロキシで静的リソースにアクセスできない問題の解決方法