如果你想讓網頁上的元素有一些動態效果,比如像火車一樣向上滑動,那么你可以使用 CSS 中的animation
屬性。
以下是一個簡單的向上慢慢滑動的 CSS 代碼示例:
.slide-up { animation-name: slide-up; animation-duration: 2s; animation-timing-function: ease; animation-fill-mode: forwards; } @keyframes slide-up { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-100%); opacity: 0; } }
上述代碼是將 class 為slide-up
的元素設定為向上滑動,持續時間為 2 秒,滑動速度為默認的緩和效果,滑動結束后保留動畫效果。
在@keyframes
中,我們指定了滑動的起始狀態和結束狀態。初始狀態為元素沿 y 軸不動,完全不透明,即表示可以看到元素;結束狀態則是元素已經向上滑動了一整個元素的長度,漸漸變成了透明的,即表示元素已經被滑出了視線范疇。
要使用這個功能,只需要將slide-up
class 添加到需要應用動畫的元素中即可。