重慶分公司
重慶分公司
css3如何實(shí)現(xiàn)簡(jiǎn)單的白云飄動(dòng)背景特效
小編給大家分享一下css3如何實(shí)現(xiàn)簡(jiǎn)單的白云飄動(dòng)背景特效，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
成都創(chuàng)新互聯(lián)，為您提供重慶網(wǎng)站建設(shè)公司、網(wǎng)站制作、網(wǎng)站營(yíng)銷(xiāo)推廣、網(wǎng)站開(kāi)發(fā)設(shè)計(jì)，對(duì)服務(wù)成都?jí)w彩繪等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)及推廣經(jīng)驗(yàn)。成都創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司成立于2013年,提供專(zhuān)業(yè)網(wǎng)站制作報(bào)價(jià)服務(wù),我們深知市場(chǎng)的競(jìng)爭(zhēng)激烈，認(rèn)真對(duì)待每位客戶(hù)，為客戶(hù)提供賞心悅目的作品。 與客戶(hù)共同發(fā)展進(jìn)步，是我們永遠(yuǎn)的責(zé)任！
HTML結(jié)構(gòu)
該白云飄動(dòng)特效的HTML結(jié)果非常簡(jiǎn)單，使用一個(gè)
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;}
}看完了這篇文章，相信你對(duì)“css3如何實(shí)現(xiàn)簡(jiǎn)單的白云飄動(dòng)背景特效”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
網(wǎng)站標(biāo)題：css3如何實(shí)現(xiàn)簡(jiǎn)單的白云飄動(dòng)背景特效
本文來(lái)源：http://weahome.cn/article/ihecoi.html
