1. ホーム
  2. Web制作
  3. CSS

[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の効果についての詳細は、スクリプトホーム他の関連記事に注意を払うしてください