CSS中鼠標(biāo)特效是一種非常常見的頁面交互方式，通過CSS的樣式設(shè)置和JavaScript的事件綁定，可以給網(wǎng)頁添加各種動(dòng)態(tài)、富有趣味性的鼠標(biāo)特效。下面我們來看幾個(gè)典型的鼠標(biāo)特效實(shí)例。

/* 鼠標(biāo)懸停變色 */
a:hover {
color: red;
}
/* 鼠標(biāo)懸停放大 */
img:hover {
transform: scale(1.2);
}
/* 鼠標(biāo)移入彈出提示框 */
.btn:hover::before {
content: "點(diǎn)擊跳轉(zhuǎn)";
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
background-color: #000;
color: #fff;
padding: 5px;
border-radius: 5px;
opacity: 0;
transition: opacity 0.3s;
}
.btn:hover::before {
opacity: 1;
}
/* 鼠標(biāo)懸停旋轉(zhuǎn) */
.box:hover {
transform: rotate(360deg);
}
/* 鼠標(biāo)懸停閃爍 */
.shine:hover {
background: linear-gradient(to right, transparent 0%, transparent 50%, #FFF 50%);
background-size: 200% 100%;
transition: all 0.5s ease-in-out;
animation: shine 2s ease-in-out infinite;
}
@keyframes shine {
0% {
background-position: -100% 0;
}
100% {
background-position: 100% 0;
}
}

這些鼠標(biāo)特效實(shí)例只是冰山一角，實(shí)際上還有許多更加豐富、有趣的效果可以借助CSS和JavaScript實(shí)現(xiàn)，讓網(wǎng)頁的交互更加生動(dòng)、活潑。希望這篇文章對(duì)大家有所幫助。