CSS是構建網(wǎng)頁的重要組成部分，其中繞點旋轉(zhuǎn)是常見的效果之一。本文將介紹如何使用CSS實現(xiàn)繞點旋轉(zhuǎn)效果。

.circle {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border-radius: 50%;
background: #00a0e9;
animation: rotate 5s linear infinite;
}
@keyframes rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg) translate(150px) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg) translate(150px) rotate(-360deg);
}
}

上述代碼中，我們首先定義一個圓形盒子，并使用絕對定位將其放置在頁面中心，然后定義了一個旋轉(zhuǎn)動畫，通過CSS3中的關鍵幀@keyframes屬性實現(xiàn)。我們在關鍵幀中定義了從0%到100%的旋轉(zhuǎn)：

• 0%狀態(tài)：盒子初始狀態(tài)為沿Y軸向右偏移，并且繞Z軸旋轉(zhuǎn)0度。
• 100%狀態(tài)：盒子沿Y軸移動的距離不變，但沿Z軸方向繞360度旋轉(zhuǎn)，使盒子沿著以頁面中心為中心、半徑為150px的圓形運動。

運用上述代碼，我們就可以實現(xiàn)繞點旋轉(zhuǎn)效果了。希望這篇文章能給大家?guī)硪恍椭?/p>