在網頁設計中，動態圖是非常重要的元素。它不僅可以提高頁面的視覺感受，而且可以為用戶帶來更好的交互體驗。今天我們將介紹一種非常流行的動態圖- CSS云朵動態圖。

.cloud {
position: relative;
width: 200px;
height: 100px;
background: #fff;
border-radius: 100px;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}
.cloud:before,
.cloud:after {
content: '';
position: absolute;
background: #fff;
border-radius: 100px;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}
.cloud:before {
width: 80px;
height: 80px;
top: -40px;
left: 20px;
}
.cloud:after {
width: 120px;
height: 120px;
top: -70px;
right: 20px;
}
.cloud span {
display: block;
position: absolute;
top: -20px;
left: 10px;
right: 10px;
height: 150px;
background: #fff;
border-radius: 80px;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
animation: cloud 3s linear infinite;
}
@keyframes cloud {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-60px);
}
}

首先，我們需要創建一個云朵容器，設置寬度、高度以及背景顏色。接著，我們使用 CSS 偽元素 :before 和 :after 來創建兩個圓形作為云朵的邊緣。設置寬度、高度、頂部和左/右上角距離即可。最后，我們創建一個包含云朵的 div，設置高度、寬度以及和頂部的距離。在 div 中，我們添加一個 span 元素，用來動畫云朵。

使用 @ keyframes 規則來定義云朵動畫。cloud 動畫在3秒鐘內，將云朵從初始位置向上移動60像素。要使動畫無限循環，在 span 元素中使用animation屬性并將動畫屬性設置為cloud。

這是一種簡單但非常有趣的 CSS 動態圖，它可以增加頁面的趣味性和吸引力。嘗試使用這個代碼來增加你的網站的動態元素！