CSS鼠標移入自身改變,是網頁設計常用的交互方式。通過CSS樣式表來控制鼠標移入和移出時不同的效果展示,使得網頁更加生動、有趣、具有吸引力。
.box { display: inline-block; width: 200px; height: 200px; background-color: #ccc; transition: all .3s ease; } .box:hover { background-color: #f00; transform: scale(1.2); }
在本示例中,`.box`選擇器表示定義一個200*200的方塊,`:hover`選擇器表示鼠標移到元素上時的樣式。我們定義了一個背景顏色,當鼠標移入時,背景顏色變成了紅色,并且縮放了1.2倍。這段代碼的核心部分是transition和transform屬性。其中,transition屬性表示元素從一種狀態到另一種狀態發生的變換,可以定義變換時間、變換方式等參數;transform屬性表示元素進行一些2D和3D變換的效果,如旋轉、縮放、移動等。
通過以上代碼示例,我們可以看到,在鼠標移入元素時,元素的背景顏色變化,大小發生了變化,是一種比較簡單但又實用的交互效果。
上一篇css鼠標移入div變寬
下一篇css鏈入式實例