CSS3中的移入放大可以讓網頁元素在鼠標移入時自動放大,增加網頁的互動性和視覺效果。
div:hover { transform: scale(1.2); }
其中,div:hover
表示鼠標移入時,作用于div元素。使用transform: scale(1.2);
將元素放大到原來的1.2倍大小。
還可以加入過渡效果,讓元素平滑放大或縮?。?/p>
div { transition: transform 0.3s ease-in-out; } div:hover { transform: scale(1.2); }
在div元素中使用transition: transform 0.3s ease-in-out;
屬性,使得放大或縮小操作平滑進行。其中,0.3s
表示過渡時間為0.3秒,ease-in-out
表示緩動函數。
除了放大,還可以通過CSS3移入效果實現許多其他有趣的效果,如旋轉、翻轉、漸變等。