CSS3 過渡技術可以讓網頁元素更有動感和交互效果。以下是一些CSS3過度的實際案例:
/* 線性漸變顏色過渡 */ div { background: linear-gradient(to right, #000000 0%, #ffffff 100%); transition: background 1s ease; } div:hover { background: linear-gradient(to right, #ffffff 0%, #000000 100%); } /* 縮放大小過渡 */ img { transition: transform 0.5s ease; } img:hover { transform: scale(1.2); } /* 旋轉過渡 */ h1 { transition: transform 1s ease; } h1:hover { transform: rotate(360deg); } /* 淡出淡入過渡 */ p { opacity: 1; transition: opacity 0.5s ease; } p:hover { opacity: 0; } /* 移動位置過渡 */ button { transition: all 0.5s ease; } button:hover { transform: translate(10px, 10px); }
以上這些CSS3過渡技巧可以讓你的網頁更加生動有趣,為用戶提供更好的交互體驗。不過要記得在合適的時機使用,并注意兼容性問題。