隨著互聯網的不斷發展,網頁設計越來越注重用戶體驗,而使用GIF動態CSS動畫是一個能夠提升用戶體驗的好方法。
/* CSS代碼 */ @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } .shake { animation: shake 1s; }
以上是一個搖晃的動畫效果的CSS代碼,通過使用animation屬性來設定動畫名稱、時間、以及重復方式。可通過嵌套HTML標簽并添加類名來實現該效果:
這里的類名shake是對應CSS代碼中自定義的動畫名稱。當頁面加載時,該動畫就會自動執行。
GIF動態CSS動畫不僅可以提高用戶體驗,而且還可以告訴用戶某些信息,比如表單驗證成功或失敗時可以使用動畫效果來提示用戶結果。
總之,使用GIF動態CSS動畫是一種簡單且有用的方式,可以使網頁更加生動有趣。