CSS 齒輪旋轉(zhuǎn)可以為網(wǎng)頁添加華麗的視覺效果，是網(wǎng)頁設(shè)計(jì)中常用到的技巧之一。

通過 CSS3 中的 transform 屬性，我們可以實(shí)現(xiàn)簡(jiǎn)單且流暢的動(dòng)畫效果。下面是一個(gè)演示代碼：

.gear {
width: 100px;
height: 100px;
position: relative;
perspective: 1000px;
animation: rotate 2s infinite linear;
}
.gear:before,
.gear:after {
content: "";
position: absolute;
border-radius: 50%;
background-color: #ccc;
}
.gear:before {
width: 60px;
height: 60px;
top: 20px;
left: 20px;
animation: reverse 2s infinite linear;
}
.gear:after {
width: 20px;
height: 20px;
top: 40px;
left: 40px;
animation: reverse 2s infinite linear;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes reverse {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}

以上代碼演示的齒輪旋轉(zhuǎn)動(dòng)畫由兩個(gè)帶動(dòng)畫效果的偽元素構(gòu)成，使用了關(guān)鍵幀動(dòng)畫實(shí)現(xiàn)。

要實(shí)現(xiàn)不同風(fēng)格的齒輪旋轉(zhuǎn)，只需要做出相應(yīng)的調(diào)整即可。例如，修改齒輪的顏色、大小，以及調(diào)整關(guān)鍵幀動(dòng)畫的參數(shù)。