CSS3動畫效果為網站帶來更多的生動感,為網站用戶提供了更好的用戶體驗。下文將通過一些例子來介紹常見的CSS3動畫特效。
/* 例一:背景顏色漸變 */ div { background: linear-gradient(to right, #000, #fff); transition: background 0.5s ease-out; } div:hover { background: linear-gradient(to right, #fff, #000); } /* 例二:鼠標移入按鈕縮放 */ button { transition: transform .5s ease-in-out; } button:hover { transform: scale(1.2); } /* 例三:圖片高斯模糊效果 */ img { transition: all .2s ease-out; filter: blur(0); } img:hover { filter: blur(4px); } /* 例四:旋轉動畫 */ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } div { animation: spin 2s linear infinite; }
除了以上幾個例子外,CSS3動畫效果還有很多種,例如懸停動畫、彈跳效果等等。如果您是網站設計愛好者或者網頁制作人員,歡迎嘗試并掌握更多的CSS3動畫特效,為您的網站增添更多的藝術感和生動感。