CSS3中的過渡效果為我們提供了一種很棒的方式,可以實現網頁設計中各種酷炫的交互動畫效果。以下是CSS3中一些流行的過渡效果的名稱:
.transition { transition: [property] [duration] [timing-function] [delay]; }
1. opacity(透明度)
這個過渡效果是最常見的,它可以讓元素從完全隱藏變得完全可見,或者相反。
.element { opacity: 0; transition: opacity 1s ease-in-out; } .element:hover { opacity: 1; }
2. transform(變形)
使用這個過渡效果可以對元素進行旋轉、縮放、平移等變形操作。
.element { transform: rotate(0deg); transition: transform 1s ease-in-out; } .element:hover { transform: rotate(360deg); }
3. color(顏色)
這個過渡效果可以將元素的顏色從一種顏色漸變到另一種顏色。
.element { color: black; transition: color 1s ease-in-out; } .element:hover { color: red; }
4. background(背景)
這個過渡效果可以讓元素的背景顏色或者背景圖片逐漸顯示或者消失。
.element { background-color: white; transition: background-color 1s ease-in-out; } .element:hover { background-color: black; }
以上這些過渡效果的名稱只是冰山一角,您還可以自己創造更多的過渡效果來讓您的網頁更炫酷。好好利用CSS3中這些過渡效果,可以讓您的網頁設計更加生動,給用戶帶來更好的體驗。
上一篇css3中的單位
下一篇mysql查詢數據庫所有