CSS3是現(xiàn)代網(wǎng)頁(yè)開(kāi)發(fā)中非常重要的一種技術(shù)，它可以讓網(wǎng)頁(yè)的表現(xiàn)更加生動(dòng)、多彩。其中，齒輪效果是CSS3中很常見(jiàn)的一種，下面我們來(lái)介紹一下如何實(shí)現(xiàn)齒輪效果。

.gear{
width:100px;
height:100px;
border-radius:50%;
background-color:#ddd;
position:relative;
overflow:hidden;
}
.gear:before, .gear:after{
content:"";
width:50px;
height:50px;
border-radius:50%;
background-color:#666;
position:absolute;
left:calc(50% - 25px);
top:-10px;
transform:rotate(45deg);
}
.gear:after{
top:auto;
bottom:-10px;
}
.gear .teeth{
width:140px;
height:100%;
position:absolute;
left:-20px;
top:0;
transform-origin:100% 50%;
transform:rotate(0);
animation:rotate 3s linear infinite;
}
.gear .teeth:before, .gear .teeth:after{
content:"";
width:40px;
height:20px;
background-color:#fff;
position:absolute;
transform:translateY(-50%);
top:50%;
left:0;
}
.gear .teeth:before{
right:0;
transform:translate(-50%,-50%);
}
.gear .teeth:after{
left:0;
transform:translate(50%,-50%);
}
@keyframes rotate{
0%{
transform:rotate(0);
}
100%{
transform:rotate(360deg);
}
}

以上就是CSS3中實(shí)現(xiàn)齒輪效果的代碼，我們可以通過(guò)CSS3的強(qiáng)大功能輕松實(shí)現(xiàn)各種效果，讓網(wǎng)頁(yè)變得更加生動(dòng)有趣。如果您想了解更多有關(guān)CSS3的內(nèi)容，可以去各大網(wǎng)站找一些相關(guān)教程進(jìn)行學(xué)習(xí)。