css3實(shí)現(xiàn)簡(jiǎn)單的白云飄動(dòng)背景特效
發(fā)布時(shí)間：2020-10-28 17:26:30 作者：螞蟻開(kāi)源社區(qū) 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了css3實(shí)現(xiàn)簡(jiǎn)單的白云飄動(dòng)背景特效的示例，幫助大家制作網(wǎng)頁(yè)特效，美化自己的網(wǎng)站，感興趣的朋友可以了解下
這是一款非常簡(jiǎn)單的純CSS3白云飄動(dòng)背景特效。該白云飄動(dòng)特效使用CSS animation動(dòng)畫(huà)來(lái)控制不同的白云，以不同的速度進(jìn)行運(yùn)動(dòng)，形成白云飄動(dòng)的效果。
HTML結(jié)構(gòu)
該白云飄動(dòng)特效的HTML結(jié)果非常簡(jiǎn)單，使用一個(gè)<div>來(lái)包裹一組作為白云的<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偽元素來(lái)制作。
.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動(dòng)畫(huà)，但是它們的動(dòng)畫(huà)速度各不相同。大小和透明度也各不相同。
.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實(shí)現(xiàn)簡(jiǎn)單的白云飄動(dòng)背景特效的詳細(xì)內(nèi)容，更多關(guān)于CSS3特效的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
css3實(shí)現(xiàn)背景圖片半透明內(nèi)容不透明的方法示例
這篇文章主要介紹了css3實(shí)現(xiàn)背景圖片半透明內(nèi)容不透明的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2021-04-13css3實(shí)現(xiàn)背景圖片顏色修改的多種方式
這篇文章主要介紹了css3實(shí)現(xiàn)背景圖片顏色修改的多種方式,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起2021-04-13
這篇文章主要介紹了css3實(shí)現(xiàn)的加載動(dòng)畫(huà)效果，幫助大家更好的利用css3制作網(wǎng)頁(yè)，感興趣的朋友可以了解下2021-04-07
這篇文章主要介紹了CSS3實(shí)現(xiàn)模糊背景的三種效果示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)2021-03-29
CSS3 菱形拼圖實(shí)現(xiàn)只旋轉(zhuǎn)div 背景圖片不旋轉(zhuǎn)功能
這篇文章主要介紹了CSS3 菱形拼圖實(shí)現(xiàn)只旋轉(zhuǎn)div 背景圖片不旋轉(zhuǎn)功能,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-03-29CSS3只讓背景圖片旋轉(zhuǎn)180度的實(shí)現(xiàn)示例
這篇文章主要介紹了CSS3只讓背景圖片旋轉(zhuǎn)180度的實(shí)現(xiàn)示例。文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一2021-03-09
基于css3制作的圓形透明畫(huà)中畫(huà)視頻播放特效
圓形透明畫(huà)中畫(huà)視頻播放特效是一款基于css3制作的創(chuàng)意透明圓形層mp4視頻播放特效代碼。2020-12-17
JS+CSS3文章內(nèi)容背景黑白切換特效代碼是一款基于JS+CSS3制作的簡(jiǎn)單網(wǎng)頁(yè)文章文字內(nèi)容背景顏色黑白切換效果。2020-11-27
CSS3 實(shí)現(xiàn)的動(dòng)態(tài)星空背景
這篇文章主要介紹了CSS3 實(shí)現(xiàn)的動(dòng)態(tài)星空背景的示例代碼，幫助大家更好的理解和學(xué)習(xí)制作CSS3特效，感興趣的朋友可以了解下2021-04-22
