CSS動畫是一種很炫酷的效果，當我們需要實現(xiàn)某些動畫效果的時候，CSS動畫可以輕松勝任。其中轉(zhuǎn)圈效果是很常見的動畫效果，下面我們來學(xué)習(xí)如何實現(xiàn)一個CSS動畫轉(zhuǎn)圈的效果。

.circle {
width: 100px;
height: 100px;
border-radius: 50%;
position: relative;
margin: 100px auto;
}
.circle .point {
position: absolute;
top: 10px;
left: 50%;
margin-left: -5px;
width: 10px;
height: 10px;
background: #fff;
border-radius: 50%;
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
.circle .point:nth-of-type(1) {
animation: rotate 2s linear infinite;
}
.circle .point:nth-of-type(2) {
animation: rotate 2s linear infinite;
animation-delay: 0.5s;
}
.circle .point:nth-of-type(3) {
animation: rotate 2s linear infinite;
animation-delay: 1s;
}
.circle .point:nth-of-type(4) {
animation: rotate 2s linear infinite;
animation-delay: 1.5s;
}

以上就是我們實現(xiàn)CSS動畫轉(zhuǎn)圈的代碼，這是一個非常簡單的動畫效果，主要是通過設(shè)置一個圓形的div，然后在這個圓形div中設(shè)置四個小的div，分別用來表示四個點。通過設(shè)置關(guān)鍵幀動畫，分別為所有點設(shè)置不同的延遲時間，就可以實現(xiàn)四個點不停地轉(zhuǎn)圈了。

如果需要調(diào)整動畫的速度或者顏色、大小等細節(jié)，可以根據(jù)自己的需求進行修改，CSS動畫的靈活性非常高，可以根據(jù)自己的需求隨意定制。