CSS3緩慢放大既能讓頁面變得更加生動有趣,又能讓用戶的視覺效果更好,是網頁設計不可缺少的一個有力工具。
/* CSS代碼 */ div{ transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; } div:hover{ transform: scale(1.5); -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); }
上述代碼是一個使用CSS3緩慢放大的例子。在普通狀態下,div元素正常顯示,而鼠標浮動在div元素上時,經過0.5秒的過渡時間,div元素會緩慢、平滑地從正常大小放大到1.5倍,以增強用戶的視覺沖擊感。
CSS3緩慢放大是可以用于圖片、文字、按鈕等元素的。除了縮放比例可以自定義之外,還可以通過控制過渡時間和過渡函數,來讓元素的放大效果有所不同。
需要注意的是,CSS3緩慢放大并不是建議在所有元素上都使用的。緩慢放大對于一些需要迅速反應、及時響應的用戶事件,可能會顯得不太適用。
上一篇php 5.6 亂碼
下一篇php 5.6 內存