CSS可以很容易地實(shí)現(xiàn)動(dòng)畫效果，比如我們可以用CSS制作一個(gè)圓形動(dòng)畫。

/* 創(chuàng)建一個(gè)圓形動(dòng)畫 */
.circle {
width: 100px;
height: 100px;
background-color: #007bff;
border-radius: 50%;
animation: circle-anim 2s infinite ease-in-out alternate;
}
/* 創(chuàng)建一個(gè)跳躍的動(dòng)畫效果 */
@keyframes circle-anim {
0% {
transform: scale(1);
}
100% {
transform: scale(1.5);
}
}

在上面的代碼中，我們創(chuàng)建了一個(gè)類名為“circle”的div，定義了其寬高、背景顏色和邊框半徑，以使其成為一個(gè)圓形。接著，在CSS中，我們使用了一個(gè)名為“circle-anim”的關(guān)鍵幀動(dòng)畫，定義了它的起始狀態(tài)和結(jié)束狀態(tài)。最后，我們將動(dòng)畫效果應(yīng)用于“circle”類名的div，使其循環(huán)播放這個(gè)動(dòng)畫。

這是一個(gè)簡(jiǎn)單而有效的CSS動(dòng)畫，可以讓你的頁(yè)面更加生動(dòng)有趣。嘗試用這個(gè)動(dòng)畫效果來(lái)為你的頁(yè)面增添一些美麗吧！