CSS3是HTML5的重要組成部分,它是一種新的CSS標準,包含了許多新的特性,其中包括CSS3實現過渡的功能:transition。
/* 基本語法 */ transition: property duration timing-function delay;
過渡可以改變元素的一些屬性,并且在兩個不同狀態之間平滑地過渡。其中,property表示被過渡的屬性,如color、background-color;duration表示過渡的持續時間,可以使用s或ms作單位;timing-function表示過渡效果曲線,常見的有linear、ease-in、ease-out、ease-in-out等;delay表示延遲多久開始執行過渡,可以使用s或ms作單位。
/* 下面是一個例子 */ .box{ width: 100px; height: 100px; background-color: red; transition: background-color 1s; } .box:hover{ background-color: blue; }
上述例子中,當鼠標懸停在box元素上時,box元素的背景顏色會從紅色平滑地過渡到藍色。通過使用transition,我們可以輕松地實現這樣的過渡效果。
上一篇css hr雙虛線
下一篇css3寬度過渡特效