CSS是一種用于控制網(wǎng)頁(yè)樣式的語(yǔ)言。通過(guò)CSS，網(wǎng)頁(yè)的字體、顏色、布局等都可以進(jìn)行控制。而如果想要在網(wǎng)頁(yè)中實(shí)現(xiàn)一些交互效果，例如當(dāng)用戶(hù)點(diǎn)擊某個(gè)元素時(shí)出現(xiàn)動(dòng)畫(huà)效果，CSS也能夠幫助我們實(shí)現(xiàn)。

.box {
width: 50px;
height: 50px;
background-color: red;
transition: all 1s;
}
.box:hover {
transform: rotate(90deg);
}

上面的代碼實(shí)現(xiàn)了當(dāng)鼠標(biāo)懸停在class為"box"的元素上時(shí)，元素會(huì)繞著中心點(diǎn)旋轉(zhuǎn)90度的動(dòng)畫(huà)效果。那么如果我們想要在點(diǎn)擊元素后出現(xiàn)動(dòng)畫(huà)效果，應(yīng)該怎樣實(shí)現(xiàn)呢？這就需要用到CSS中的@click偽類(lèi)。

.box {
width: 50px;
height: 50px;
background-color: red;
transition: all 1s;
}
.box:active {
transform: rotate(90deg);
}

上面的代碼實(shí)現(xiàn)了當(dāng)用戶(hù)點(diǎn)擊class為"box"的元素時(shí)，元素會(huì)繞著中心點(diǎn)旋轉(zhuǎn)90度的動(dòng)畫(huà)效果。需要注意的是，@click偽類(lèi)只能用于、、和等元素上。因此，如果需要在其他元素上實(shí)現(xiàn)點(diǎn)擊事件，建議使用JavaScript進(jìn)行處理。