CSS實(shí)現(xiàn)360無線旋轉(zhuǎn)是一項(xiàng)非常有趣的功能，可以讓我們的頁面更加生動(dòng)有趣。下面我們來介紹一下如何通過CSS實(shí)現(xiàn)這一功能。

.box {
width: 200px;
height: 200px;
background-color: #f00;
position: relative;
animation: rotate 2s linear infinite;
}
.box::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #fff;
opacity: 0.5;
}
@keyframes rotate {
from {transform: rotateY(0deg);}
to {transform: rotateY(360deg);}
}

以上代碼中，我們創(chuàng)建了一個(gè)元素，并為它設(shè)置了寬度、高度和背景顏色。同時(shí)，我們?yōu)檫@個(gè)元素設(shè)置了相對(duì)定位，是為了讓偽元素（::before）相對(duì)于它進(jìn)行定位。

偽元素被設(shè)置為與元素本身大小相同，并且我們?yōu)樗O(shè)置了半徑為50%的圓形邊框，這樣我們就得到了一個(gè)圓形元素。同時(shí)，我們還為偽元素設(shè)置了不透明度，這樣我們才能看到元素旋轉(zhuǎn)時(shí)偽元素的位置與變化。

最后，我們?yōu)樵靥砑恿艘粋€(gè)動(dòng)畫，這個(gè)動(dòng)畫是通過CSS3的@keyframes規(guī)則來創(chuàng)建的。在這個(gè)動(dòng)畫中，我們將元素從0度逐漸旋轉(zhuǎn)到360度，然后再從360度逐漸旋轉(zhuǎn)回到0度。這樣，我們就實(shí)現(xiàn)了360度無線旋轉(zhuǎn)的效果。