CSS3動畫是網頁設計中越來越常見的一種技術,本文將介紹一些CSS3動畫的方法。
1. transition過渡動畫
div { width: 100px; height: 100px; background-color: blue; transition: background-color 1s ease; } div:hover { background-color: red; }
在這個例子中,當鼠標放到div上時,div的背景色會從藍色漸變為紅色,過渡時間為1秒。
2. transform變換
div { width: 100px; height: 100px; background-color: blue; transform: rotate(30deg); }
在這個例子中,div被旋轉了30度。
3. animation動畫
div { width: 100px; height: 100px; background-color: blue; animation: myanim 1s infinite; } @keyframes myanim { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
在這個例子中,div會不斷縮放,從正常大小到稍微變大,再回到正常大小。
4. keyframe關鍵幀動畫
div { width: 100px; height: 100px; background-color: blue; animation: myanim 1s infinite; } @keyframes myanim { 0% { background-color: blue; } 50% { background-color: red; } 100% { background-color: blue; } }
在這個例子中,div的背景色將不斷閃爍,從藍色變為紅色,再變回藍色。
總結:
CSS3動畫可以讓網頁更加生動有趣,transition和transform比較簡單易懂,但動畫效果不夠酷炫;animation和keyframe能實現更加復雜的動畫效果,但寫法相對麻煩。
上一篇loop php
下一篇css3動畫fade