CSS 是網(wǎng)頁(yè)設(shè)計(jì)中必不可少的一部分，除了能使頁(yè)面樣式更加炫酷以外，還能增強(qiáng)用戶體驗(yàn)。下面介紹一種常見的 CSS 技巧：圖片懸停浮動(dòng)效果。

img:hover {
/* 對(duì)應(yīng)效果：鼠標(biāo)懸停時(shí)，圖片會(huì)向左浮動(dòng) 10px */
transform: translateX(-10px);
transition-duration: 0.5s;
}

以鼠標(biāo)移入元素的動(dòng)作為觸發(fā)，使對(duì)應(yīng)圖片的位置向左或向右浮動(dòng)一定距離，產(chǎn)生“活力”和“互動(dòng)性”的效果，增強(qiáng)了用戶體驗(yàn)。

當(dāng)然，除了此效果，還有很多其他的鼠標(biāo)懸停浮動(dòng)效果，如圖片的放大縮小、圖片的旋轉(zhuǎn)、文字的顏色變化等等，都可以通過 CSS 來(lái)實(shí)現(xiàn)，讓頁(yè)面變得更加美觀和生動(dòng)。在實(shí)際運(yùn)用中，只要注意在適當(dāng)?shù)牡胤绞褂眉纯伞?/p>