CSS3 でシンプルな白い雲が浮かぶ背景効果を実現

CSS3 でシンプルな白い雲が浮かぶ背景効果を実現

これは非常にシンプルな純粋な 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 sql_mode の分析と設定の説明

昨夜、MySQL データベースにデータセットを挿入したときにエラーが発生しました。データベースは容赦...

MySQL バイナリログデータ復旧: 誤ってデータベースを削除した場合の詳細な説明

MySQL Binログデータの回復: 誤ってデータベースを削除した場合前書き: テスト マシンで誤っ...

dockerでopenGaussデータベースを構成する方法の詳細な説明

Windowsユーザー向けDocker で openGauss を使用するopenGaussイメージ...

Dockerコンテナを使用する簡単な例

目次1. イメージをプルする2. イメージを実行する3. コンテナ内でアプリケーションをテストする4...

MySQLの保存時間の不一致の問題を解決する

Java を使用してシステム時間を取得し、それを MySQL データベースに保存した後、時間タイプが...

JavaScript が Jingdong の虫眼鏡の特殊効果を模倣

この記事では、Jingdong虫眼鏡を模倣したJavaScriptの具体的なコードを参考までに共有し...

ElementUI のネストされたテーブルに基づいて複数選択を実装するためのサンプル コード

序文:私は友人のプロジェクトのバグを修正するのを手伝ったのでこれを書きました。この関数を書くのは初め...

WeChatアプレットがログインインターフェースを実装

WeChatアプレットのログインインターフェースは参考までに実装されています。具体的な内容は次のとお...

Docker に Zookeeper を素早くインストールする方法の詳細なチュートリアル

Docker で Zookeeper を素早くインストール会社を変わってから長らくZookeeper...

IDEA は Docker プラグインを使用します (初心者向けチュートリアル)

目次例示する1. Dockerリモートアクセスを有効にする2. Dockerに接続する3. イメージ...

HTTPプロトコルにおけるステータスコードの意味

暫定的な応答を示し、要求者に操作の続行を要求するステータス コード。コードの説明100 (続行) リ...

Vue のプロダクション環境と開発環境を切り替えてフィルターを使用する方法

目次1. 本番環境と開発環境を切り替える最初の方法: .envファイルを設定する2番目の方法2. フ...

ページに間隔を空けてグリッドレイアウトを完璧に実装する方法

典型的なレイアウト例上の写真のように、正方形の真ん中に一定の隙間があり、その隙間は固定されています。...

MySQLトリガーの簡単な使用例

この記事では、例を使用して MySQL トリガーの簡単な使用方法を説明します。ご参考までに、詳細は以...