CSS3是一個非常強大的樣式表語言，可以用來控制網頁的外觀和布局。其中的一個非常有趣的特性就是齒輪咬合（Gear Bites）效果，可以讓你的網頁看起來更加生動和有趣。

.gear {
width: 150px;
height: 150px;
position: relative;
cursor: pointer;
transition: transform 1s ease-out;
}
.gear:before, .gear:after {
content: "";
background: #E7E7E7;
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
border-radius: 50%;
border: 2px solid #D1D1D1;
}
.gear:before {
transform: rotate(-45deg);
}
.gear:after {
transform: rotate(45deg);
}
.gear:hover {
transform: rotate(360deg);
}
.gear:hover:before {
transform: rotate(-360deg);
}
.gear:hover:after {
transform: rotate(360deg);
}
.gear .teeth {
width: 10px;
height: 20px;
position: absolute;
top: 0;
left: 50%;
margin-left: -5px;
background: #D1D1D1;
transform-origin: bottom center;
}
.gear .teeth:nth-child(1) {
transform: rotate(0deg);
}
.gear .teeth:nth-child(2) {
transform: rotate(30deg);
}
.gear .teeth:nth-child(3) {
transform: rotate(60deg);
}
.gear .teeth:nth-child(4) {
transform: rotate(90deg);
}
.gear .teeth:nth-child(5) {
transform: rotate(120deg);
}
.gear .teeth:nth-child(6) {
transform: rotate(150deg);
}
.gear .teeth:nth-child(7) {
transform: rotate(180deg);
}
.gear .teeth:nth-child(8) {
transform: rotate(210deg);
}
.gear .teeth:nth-child(9) {
transform: rotate(240deg);
}
.gear .teeth:nth-child(10) {
transform: rotate(270deg);
}
.gear .teeth:nth-child(11) {
transform: rotate(300deg);
}
.gear .teeth:nth-child(12) {
transform: rotate(330deg);
}

如上所示，這是實現齒輪咬合效果的CSS代碼。我們首先創建了一個 .gear 類，表示每個齒輪的樣式。然后通過偽元素 :before 和 :after 創建了兩個圓形的齒輪，并對其進行了旋轉。

接著，我們給 .gear 類添加了:hover 偽類，表示鼠標懸停在齒輪上時的樣式。在:hover 偽類中，我們將整個齒輪以及兩個圓形齒輪進行了旋轉。為了實現齒輪咬合的效果，我們還使用了 .teeth 類來創建每個齒輪上的齒，通過 transform: rotate() 屬性來將齒輪咬合在一起。

總的來說，齒輪咬合的效果使用CSS實現非常簡單，只需要對齒輪和齒進行一些基本的變換即可。使用齒輪咬合效果可以為網頁增加一些趣味性和活力，讓訪問者更容易被吸引。希望本文能幫助大家實現自己的齒輪咬合效果，讓網頁更加生動有趣。