白云飄蕩是一款常見的CSS3動(dòng)畫效果，通過CSS3中的前綴屬性-webkit-animation，實(shí)現(xiàn)了云朵緩慢飄動(dòng)的效果。

.cloud {
position: absolute;
top: 30%;
left: -10%;
width: 100%;
height: 50%;
background: url('cloud.png') repeat-x center center;
z-index: -1;
animation: move_cloud 2s infinite linear;
-webkit-animation: move_cloud 2s infinite linear;
}
@keyframes move_cloud {
0% {
transform: translateX(-10%);
}
100% {
transform: translateX(10%);
}
}
@-webkit-keyframes move_cloud {
0% {
-webkit-transform: translateX(-10%);
}
100% {
-webkit-transform: translateX(10%);
}
}

首先，我們需要定義一個(gè)class為cloud的元素，并將其設(shè)置為絕對(duì)定位。然后，利用css中的background屬性，從外部引入云朵圖片進(jìn)行背景填充，通過水平鋪滿repeat-x，實(shí)現(xiàn)云朵的縱向自適應(yīng)。接著，我們使用animation或-webkit-animation屬性，關(guān)聯(lián)名為move_cloud的動(dòng)畫，將其無限循環(huán)播放，且運(yùn)動(dòng)方式為線性運(yùn)動(dòng)。

在動(dòng)畫的關(guān)鍵幀中，我們通過transform或-webkit-transform屬性對(duì)元素進(jìn)行平移變換，從而實(shí)現(xiàn)云朵的移動(dòng)。在0%處，云朵出現(xiàn)在屏幕左側(cè)，向右平移10%，最終出現(xiàn)在屏幕右側(cè)，形成了循環(huán)的飄動(dòng)效果。

白云飄蕩這一CSS3動(dòng)畫效果的產(chǎn)生，極大地豐富了網(wǎng)頁元素的表現(xiàn)形式，使得網(wǎng)頁在視覺上更加生動(dòng)有趣。同時(shí)，也展示了CSS3前綴屬性-webkit-animation的強(qiáng)大功能，展示出了其在移動(dòng)端網(wǎng)頁開發(fā)中的重要作用。