[css3]シンプルな白い雲の浮かぶ背景効果を実現するcss3
2022-02-03 23:44:59
これは、非常にシンプルなピュアCSS3の白い雲の浮遊背景効果です。CSSアニメーションを使って、異なるスピードで動く白い雲を制御し、白い雲の浮遊感を演出しています。
HTMLの構造
この白い雲の浮遊効果のHTML結果は非常にシンプルで、白い雲として機能する一連の<div>要素を<div>で囲んでいます。
<div id="clouds">
<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 疑似要素を使って作られています。
.cloud {
width: 200px; height: 60px;
background: #fff;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: relative;
}
.cloud:before, .cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px; height: 80px;
position: absolute; top: -15px; left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.cloud:after {
width: 120px; height: 120px;
top: -55px; left: auto; right: 15px;
}
白い雲はそれぞれmovecloudsのアニメーションを行うが、その速度は異なる。また、大きさや透明度も異なる。
.x1 {
-webkit-animation: moveclouds 15s linear infinite;
-moz-animation: moveclouds 15s linear infinite;
-o-animation: moveclouds 15s linear infinite;
}
.x2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6; /*opacity proportional to the size*/
/*Speed will also be proportional to the size and opacity*/
/*More the speed. less the time in 's' = seconds*/
-webkit-animation: moveclouds 25s linear infinite;
-moz-animation: moveclouds 25s linear infinite;
-o-animation: moveclouds 25s linear infinite;
}
......
@-webkit-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
上記は、単純な白い雲の浮動背景効果を達成するためにCSS3の詳細であり、CSS3の効果についての詳細は、スクリプトホーム他の関連記事に注意を払うしてください
関連
-
[CSSチュートリアル】純粋なCSSでWebページの内容をコピーできないようにする方法
-
[css3]ピュアCSS3でdivのinとoutの効果を順番に実現する
-
[css3]スクロールバー美化効果を実現するcss3サンプルコード
-
[css3]赤いパケットのジッター効果を実現するCSS3
-
[CSSチュートリアル】SVGを使ったCSSアニメーションでエネルギーフローを表現する
-
[CSSチュートリアル】ホバードロップダウンメニュー方式を実現するCSS
-
[CSSチュートリアル】BlazorでCSSを分離する
-
[css3] css3の擬似クラスについて、共通使用前と共通使用後で説明する。
-
[CSSチュートリアル]マウスをスライドさせてカードを浮かせるCSSの例
-
[CSSチュートリアル]cssで背景画像の上にテキストを実現する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】CSS+HTMLで実現するトップナビゲーションバー機能
-
[CSSチュートリアル】CSS3Animationで実現する簡単な指のクリックアニメーションの例
-
[CSSチュートリアル]cssのbackgroundとborderタグの例 詳細
-
[CSSチュートリアル]cssの位置固定コードで左右2重の位置決め
-
[CSSチュートリアル】CSS3で3つの効果例の背景をぼかす。
-
[CSSチュートリアル】CSSカウンターを使った数字の並びの美化方法
-
[CSSチュートリアル】CSSで実現できるのなら、わざわざJavaScriptを使う必要はない
-
[CSSチュートリアル]実装ステップの吸引上部と下部のH5レイアウトのための純粋なCSSソリューション
-
[css3]水平方向のプログレスバーの最後にテキストを表示するCSSコード
-
[css3】cssのmarginとvertical marginの重なりの値について