過度效果(Transition)是CSS3中非常有用的一種特性。在進行元素的樣式改變時,通過使用過度效果可以讓這些改變更加流暢和生動,給用戶良好的體驗。過度效果也可用于改變元素的透明度、位置、大小等屬性。
transition: property duration timing-function delay;
property: 要發生過渡效果的屬性。例如 "background-color", "border", "color", "opacity" 等等。
duration: 變化時長。以秒(s)或毫秒(ms)為單位。默認為0,即不產生過渡效果。
timing-function: 過渡的時間變化曲線。有linear、ease、ease-in、ease-out和ease-in-out等預設曲線可選,也可以自定義曲線。
delay: 延遲時間。如果設置了延遲時間,將在該時間后啟動過渡效果。
/* 示例 */ button { background-color: green; transition: background-color 0.2s ease-out; } button:hover { background-color: red; }
當鼠標懸浮在按鈕上時,將會以0.2秒緩慢地過渡從綠色到紅色。
上一篇css的重要兩個特性
下一篇mysql 閏秒