css3實現(xiàn)簡單的白云飄動背景特效

發(fā)布時間：2020-10-28 17:26:30 作者：螞蟻開源社區(qū)

我要評論

這篇文章主要介紹了css3實現(xiàn)簡單的白云飄動背景特效的示例，幫助大家制作網(wǎng)頁特效，美化自己的網(wǎng)站，感興趣的朋友可以了解下

這是一款非常簡單的純CSS3白云飄動背景特效。該白云飄動特效使用CSS animation動畫來控制不同的白云，以不同的速度進行運動，形成白云飄動的效果。

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;
}

每一朵白云都執(zhí)行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實現(xiàn)簡單的白云飄動背景特效的詳細內容，更多關于CSS3特效的資料請關注腳本之家其它相關文章！