CSS動畫與頁面過渡效果是網頁設計中非常重要的一部分。CSS動畫可以幫助我們實現各種各樣的動畫效果,而頁面過渡效果可以使頁面間的切換更加平滑自然,給人良好的使用體驗。
代碼示例: /* 定義一個旋轉動畫 */ @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 應用旋轉動畫到某個元素上 */ .box { animation-name: rotate; animation-duration: 3s; animation-iteration-count: infinite; } /* 定義一個頁面過渡效果 */ .page { transition: all 0.3s ease-in-out; } /* 應用頁面過渡效果到鏈接按鈕上 */ .button { background-color: #4CAF50; color: white; padding: 12px 24px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 8px; transition: all 0.3s ease-in-out; } /* 鼠標懸浮時鏈接按鈕樣式變化 */ .button:hover { background-color: white; color: #4CAF50; border: 2px solid #4CAF50; }
以上代碼示例展示了如何使用CSS來實現動畫效果和頁面過渡效果。通過定義關鍵幀動畫或者過渡屬性,然后將其應用到某個元素上,就可以實現各種各樣的動態效果。
CSS動畫和頁面過渡效果都可以提高網站的交互性和用戶體驗,但也要注意不要過度使用,以免影響網站的性能和速度。在設計網站時,應該根據具體情況選擇合適的動畫效果和過渡效果。