CSS滾屏動畫是網頁設計中經常使用的一種效果,在滾動時可以讓頁面元素以各種不同的形式進行動畫展現,給用戶帶來更好的視覺體驗。以下是一些常見的滾屏動畫。
/* 淡入淡出效果 */ .fade-in { opacity: 0; animation-name: fade-in; animation-duration: 1s; animation-fill-mode: forwards; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* 左右滑動 */ .slide-from-left { transform: translateX(-100%); animation-name: slide-from-left; animation-duration: 1s; animation-fill-mode: forwards; } @keyframes slide-from-left { from { transform: translateX(-100%); } to { transform: translateX(0); } } .slide-from-right { transform: translateX(100%); animation-name: slide-from-right; animation-duration: 1s; animation-fill-mode: forwards; } @keyframes slide-from-right { from { transform: translateX(100%); } to { transform: translateX(0); } } /* 上下滑動 */ .slide-from-top { transform: translateY(-100%); animation-name: slide-from-top; animation-duration: 1s; animation-fill-mode: forwards; } @keyframes slide-from-top { from { transform: translateY(-100%); } to { transform: translateY(0); } } .slide-from-bottom { transform: translateY(100%); animation-name: slide-from-bottom; animation-duration: 1s; animation-fill-mode: forwards; } @keyframes slide-from-bottom { from { transform: translateY(100%); } to { transform: translateY(0); } }
上面是常見的CSS滾屏動畫,通過CSS的animation屬性可以實現各種各樣的動畫效果。同時,借助JavaScript可以實現更加復雜的滾屏動畫,讓頁面效果更加優美。
上一篇mysql開啟事務的語句
下一篇mysql 強制刪除數據