CSS3云朵飄動是一種非常炫酷的效果。通過使用CSS3的動畫屬性，可以讓頁面上的云朵像在飄動一樣。下面我們來了解一下如何實現這種效果。

.cloud {
width: 100px;
height: 80px;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.cloud:nth-child(1) {
animation: move-cloud 6s linear infinite;
left: -20%;
}
.cloud:nth-child(2) {
animation: move-cloud 6s linear infinite;
left: 10%;
top: 10%;
}
.cloud:nth-child(3) {
animation: move-cloud 8s linear infinite;
left: 80%;
}
.cloud:nth-child(4) {
animation: move-cloud 8s linear infinite;
left: 50%;
top: 70%;
transform: translate(-50%, -70%);
}
@keyframes move-cloud {
from {
transform: translateX(-200%);
}
to {
transform: translateX(200%);
}
}

以上是CSS3云朵飄動效果的代碼。首先我們需要創建一個云朵的div，設置寬高、背景色和圓角屬性。然后使用絕對定位將其放在頁面中央，并使用transform屬性將其水平和垂直方向移動到中央位置。

接著，我們可以使用:nth-child選擇器來創建多個云朵，并分別設置它們的動畫效果和位置。使用animation屬性設置云朵的運動軌跡，這里我們使用了一個自定義的keyframes。通過改變transform屬性的translateX值，來實現云朵從左到右或從右到左的運動效果。

最后，通過設置infinite屬性，讓云朵動畫實現無限循環。這樣，就可以實現一個炫酷的CSS3云朵飄動效果了。