色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

簡單的向上慢慢滑動css

張吉惟2年前8瀏覽0評論

如果你想讓網頁上的元素有一些動態效果,比如像火車一樣向上滑動,那么你可以使用 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-upclass 添加到需要應用動畫的元素中即可。