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

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

効果

効果は以下のとおりです

実装のアイデア

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

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 プロキシで静的リソースにアクセスできない問題の解決方法

推薦する

mysql 5.6.23 winx64.zip インストール詳細チュートリアル

WindowsにMySQLの圧縮バージョンをインストールする方法の詳細については、以下を参照してくだ...

Jira リバース プロキシを実装するための nginx について

概要: nginx リバース プロキシ jira を構成し、https を実装します。Tomcat ...

フォーム送信の更新ページはソースコード設計にジャンプしません

1. ソースコードの設計コードをコピーコードは次のとおりです。 <!DOCTYPE html ...

ディスク容量不足による MySQL レプリケーション障害の解決方法

目次ケースシナリオ問題を解決するまとめケースシナリオ本日、オンラインで問題が発見されました。監視範囲...

Webフォーム作成スキル

実際、上記の 3 つの表はいずれも 3 行 3 列です。区切り線を非表示にするコツはルールにあります...

CSS を使用して ul と li の水平配置を実現する 2 つの方法

li はブロックレベル要素であり、デフォルトで 1 行を占めるため、水平方向の配置を実現する場合は、...

Linux で pip 操作中にタイムアウトが発生する問題を解決する方法

Linuxインスタンスでpipを使用する際のタイムアウト問題を解決する方法pip は最も人気のある ...

mysql 5.7.20 win64 のインストールと設定方法

mysql-5.7.20-winx64.zipインストール手順のないインストール パッケージ: ht...

MySQLステートメントの記述と実行順序を理解するだけです

MySQL ステートメントの書き込み順序と実行順序には大きな違いがあります。書き順、mysql の一...

CSSを使用してファイルアップロードパターンを描画する

以下に示すように、あなたならどのようにそれを達成しますか: 通常、フォントアイコンを使用して中央にプ...

MySQL 5.7.20\5.7.21 無料インストール版のインストールと設定のチュートリアル

参考までに、mysql 5.7.20 / 5.7.21 をダウンロード、インストール、構成します。具...

Linux カーネル デバイス ドライバーのメモリ管理に関する注意事項

/************************ * Linux メモリ管理 *********...

Docker Composeオーケストレーションツールの詳細な説明

Docker の作成Docker Compose は、複数の Docker コンテナを定義して実行す...

MySQLメモリストレージエンジンに関する知識

メモリストレージエンジンに関する知識ポイントメモリ ストレージ エンジンは日常業務ではほとんど使用さ...