CSS是前端開發者們非常熟悉的一種樣式表語言,它可以讓網站開發者們通過控制HTML頁面的顯示效果來達到更好的展示效果。其中,CSS3給我們帶來了更加豐富的屬性,比如放大屬性使用transition實現。
/* CSS代碼 */ img:hover { transition: transform .2s ease-in-out; transform: scale(1.1); }
在上面的CSS代碼中,我們針對 img 標簽使用了:hover偽類,表示鼠標懸停在圖片上時才生效。然后,在 img:hover 中設置了 transition 屬性,這個屬性可以讓元素在指定的時長內從當前狀態過渡到另一個狀態。
然后我們給 transition 屬性傳遞了三個參數,第一個參數 transform 表示過渡屬性為 transform,這表示在過渡期間會將元素的CSS transform 屬性的值進行動態改變。第二個參數 .2s 表示過渡的持續時間為 0.2 秒。第三個參數 ease-in-out 表示過渡函數,這個函數會讓元素緩緩變大再緩緩變小。
最后,我們將元素的 transform 值設置為 scale(1.1),這個表示鼠標懸停在img元素上時,會將原本的元素放大 10%。
通過以上的CSS代碼,我們可以實現鼠標懸停時放大元素的效果。而這里的重點就是使用transition這個屬性來實現平滑的過渡效果。
下一篇css表格內文本對齊