CSS3是最新版本的CSS(層疊樣式表),在CSS3中增加了許多新的特性,其中之一便是過渡(Transition)效果。
transition: property duration timing-function delay;
過渡效果的語法格式為上述代碼,其中property指的是要過渡的CSS屬性,duration指的是過渡的時間,timing-function指的是過渡的速度曲線,delay指的是過渡延遲的時間。
下面是一個例子,當鼠標懸停在按鈕上時,按鈕會緩慢地從灰色變成紅色:
.button { background-color: gray; transition: background-color 0.5s ease; } .button:hover { background-color: red; }
在上述例子中,我們通過給按鈕添加過渡效果,使得按鈕顏色的變化更加平滑自然。
CSS3過渡效果可以應用于大多數(shù)CSS屬性,比如顏色、尺寸、位置等等。通過使用過渡效果,我們可以提高網(wǎng)站的用戶體驗和視覺效果。