CSS是一種用于美化網(wǎng)頁的語言,常常使用鼠標(biāo)懸停效果來增加網(wǎng)頁交互性。這種效果可以通過CSS中的偽類:hover來實(shí)現(xiàn)。
.box{ width:100px; height:100px; background-color:#f5f5f5; transition: .3s ease-in-out; /* 過渡動畫效果 */ } .box:hover{ background-color:#ffcccc; transform: scale(1.2); /* 放大1.2倍 */ }
在上面的代碼中,我們使用了一個(gè)名為.box的class來定義一個(gè)正方形的盒子。當(dāng)鼠標(biāo)懸停在這個(gè)盒子上時(shí),背景顏色將會由原本的灰色變更為粉紅色,并且盒子的大小將會放大1.2倍。
使用:hover偽類不僅可以增加鼠標(biāo)懸停效果,還可以實(shí)現(xiàn)其他一些有趣的動畫效果。
.btn{ padding:10px 20px; background-color:#3498db; color:#fff; border:none; border-radius:5px; transition: .3s ease-in-out; } .btn:hover{ background-color:#2980b9; transform:rotate(360deg); /* 旋轉(zhuǎn)360度 */ }
在這個(gè)示例中,我們定義了一個(gè)名為.btn的class來定義一個(gè)按鈕。當(dāng)鼠標(biāo)懸停在這個(gè)按鈕上時(shí),按鈕的背景顏色將變更為深藍(lán)色,并且按鈕將會沿著中心點(diǎn)旋轉(zhuǎn)360度。
借助于:hover偽類以及一些CSS動畫效果,我們可以輕松實(shí)現(xiàn)許多有趣的鼠標(biāo)懸停效果,讓網(wǎng)頁更加生動有趣。