CSS3是CSS技術的最新版本,其引入了咻一咻(transitions)的概念。
transition: property duration timing-function delay;
通過設置屬性、持續時間、時間函數和延遲時間,可以創建平滑的過渡效果。
比如,hover狀態下讓按鈕背景顏色漸變:
button { background-color: blue; transition: background-color 1s ease-in-out; } button:hover { background-color: red; }
這段代碼會使得按鈕背景顏色在1秒鐘內從藍色漸變為紅色。
同時,咻一咻還可以配合transform屬性使用,實現旋轉、縮放等動態效果:
.box { width: 100px; height: 100px; background-color: blue; transition: transform 1s ease-in-out; } .box:hover { transform: rotate(45deg) scale(1.5); }
這段代碼會使得鼠標懸浮在.box上時,盒子會旋轉45度并放大1.5倍。
總而言之,咻一咻為網頁增添了更多動態效果,讓用戶體驗更加豐富。
上一篇css n腳本盜號
下一篇css order屬性