これは非常にシンプルな純粋な CSS3 の白い雲の浮遊する背景効果です。浮かぶ白い雲の特殊効果は、CSS アニメーションを使用してさまざまな白い雲を制御し、さまざまな速度で移動して、浮かぶ白い雲の効果を作成します。 HTML構造 この白い雲の浮遊効果の HTML 結果は非常にシンプルです。<div> を使用して、一連の <div> 要素を白い雲として囲みます。 <div id="雲"> <div class="cloud x1"></div> <div class="cloud x2"></div> <div class="cloud x3"></div> <div class="cloud x4"></div> <div class="cloud x5"></div> </div> CSS スタイル 白い雲は、.cloud とその :before および :after 疑似要素を使用して作成されます。 。雲 { 幅: 200ピクセル; 高さ: 60ピクセル; 背景: #fff; 境界線の半径: 200px; -moz-border-radius: 200px; -webkit-border-radius: 200px; 位置: 相対的; } .cloud:before、.cloud:after { コンテンツ: ''; 位置: 絶対; 背景: #fff; 幅: 100ピクセル; 高さ: 80ピクセル; 位置: 絶対; 上: -15px; 左: 10px; 境界線の半径: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; -webkit-transform: 回転(30度); 変換: 回転(30度); -moz-transform:回転(30度); } .cloud:after { 幅: 120ピクセル; 高さ: 120ピクセル; 上: -55px; 左: 自動; 右: 15px; } 各クラウドは moveclouds アニメーションを実行しますが、アニメーションの速度はそれぞれ異なります。サイズや透明度も異なります。 .x1 { -webkit-animation: moveclouds 15s 線形無限; -moz-animation: moveclouds 15s 線形無限; -o-アニメーション: moveclouds 15s 線形無限; } .x2 { 左: 200px; -webkit-transform: スケール(0.6); -moz-transform: スケール(0.6); 変換: スケール(0.6); opacity: 0.6; /*サイズに比例した不透明度*/ /*速度はサイズと不透明度にも比例します*/ /*速度が速いほど、時間が短くなります (単位は 's' = 秒)*/ -webkit-animation: moveclouds 25s linear infinite; -moz-animation: moveclouds 25s 線形無限; -o-アニメーション: moveclouds 25s 線形無限; } ...... @-webkit-keyframes 移動クラウド { 0% {左マージン: 1000px;} 100% {左マージン: -1000px;} } @-moz-keyframes 移動クラウド { 0% {左マージン: 1000px;} 100% {左マージン: -1000px;} } @-o-keyframes 移動クラウド { 0% {左マージン: 1000px;} 100% {左マージン: -1000px;} } 上記は、CSS3 を使用してシンプルな白い雲が浮かぶ背景効果を実現する方法の詳細です。CSS3 特殊効果の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 |
<<: フロントエンド例外 502 不正なゲートウェイの原因と解決策
>>: ウェブフロントエンド開発者が知っておくべき 9 つの実用的な CSS プロパティ
昨夜、MySQL データベースにデータセットを挿入したときにエラーが発生しました。データベースは容赦...
MySQL Binログデータの回復: 誤ってデータベースを削除した場合前書き: テスト マシンで誤っ...
Windowsユーザー向けDocker で openGauss を使用するopenGaussイメージ...
目次1. イメージをプルする2. イメージを実行する3. コンテナ内でアプリケーションをテストする4...
Java を使用してシステム時間を取得し、それを MySQL データベースに保存した後、時間タイプが...
この記事では、Jingdong虫眼鏡を模倣したJavaScriptの具体的なコードを参考までに共有し...
序文:私は友人のプロジェクトのバグを修正するのを手伝ったのでこれを書きました。この関数を書くのは初め...
WeChatアプレットのログインインターフェースは参考までに実装されています。具体的な内容は次のとお...
Docker で Zookeeper を素早くインストール会社を変わってから長らくZookeeper...
目次例示する1. Dockerリモートアクセスを有効にする2. Dockerに接続する3. イメージ...
暫定的な応答を示し、要求者に操作の続行を要求するステータス コード。コードの説明100 (続行) リ...
目次1. 本番環境と開発環境を切り替える最初の方法: .envファイルを設定する2番目の方法2. フ...
典型的なレイアウト例上の写真のように、正方形の真ん中に一定の隙間があり、その隙間は固定されています。...
この記事では、例を使用して MySQL トリガーの簡単な使用方法を説明します。ご参考までに、詳細は以...
1. flex-direction: (要素の配置方向) ※ flex-direction:row ...