効果 効果は以下のとおりです
実装のアイデア
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 プロキシで静的リソースにアクセスできない問題の解決方法
WindowsにMySQLの圧縮バージョンをインストールする方法の詳細については、以下を参照してくだ...
概要: nginx リバース プロキシ jira を構成し、https を実装します。Tomcat ...
1. ソースコードの設計コードをコピーコードは次のとおりです。 <!DOCTYPE html ...
目次ケースシナリオ問題を解決するまとめケースシナリオ本日、オンラインで問題が発見されました。監視範囲...
実際、上記の 3 つの表はいずれも 3 行 3 列です。区切り線を非表示にするコツはルールにあります...
li はブロックレベル要素であり、デフォルトで 1 行を占めるため、水平方向の配置を実現する場合は、...
Linuxインスタンスでpipを使用する際のタイムアウト問題を解決する方法pip は最も人気のある ...
mysql-5.7.20-winx64.zipインストール手順のないインストール パッケージ: ht...
MySQL ステートメントの書き込み順序と実行順序には大きな違いがあります。書き順、mysql の一...
以下に示すように、あなたならどのようにそれを達成しますか: 通常、フォントアイコンを使用して中央にプ...
参考までに、mysql 5.7.20 / 5.7.21 をダウンロード、インストール、構成します。具...
/************************ * Linux メモリ管理 *********...
Docker の作成Docker Compose は、複数の Docker コンテナを定義して実行す...
ページの主要部分: <body> <ul id="メニュー"&...
メモリストレージエンジンに関する知識ポイントメモリ ストレージ エンジンは日常業務ではほとんど使用さ...