CSS中滑動(dòng)效果是一種非常流行的動(dòng)畫效果，可以為網(wǎng)頁增添活力和時(shí)尚感。這種效果可以應(yīng)用于圖片、文字、背景等元素，下面是幾種常見的滑動(dòng)效果：

/* 圖片向右滑動(dòng) */
img {
position: relative;
animation-name: slide-right;
animation-duration: 1s;
}
@keyframes slide-right {
0% {
left: 0;
}
100% {
left: 100%;
}
}
/* 文字向左滑動(dòng) */
h1 {
position: relative;
animation-name: slide-left;
animation-duration: 1s;
}
@keyframes slide-left {
0% {
right: 0;
opacity: 0;
}
100% {
right: 100%;
opacity: 1;
}
}
/* 背景顏色漸變滑動(dòng) */
div {
position: relative;
}
div::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, #f00, #00f);
animation-name: slide-gradient;
animation-duration: 1s;
}
@keyframes slide-gradient {
0% {
left: 0;
}
100% {
left: 100%;
}
}

以上代碼中，都使用了animation動(dòng)畫屬性，其中animation-name指定了動(dòng)畫名稱，后面的slide-right、slide-left和slide-gradient是自定義的動(dòng)畫名稱，animation-duration指定了動(dòng)畫持續(xù)時(shí)間，上述三個(gè)例子都是1秒，你可以根據(jù)需要改變。

關(guān)于滑動(dòng)方向，我們可以控制left、right、top、bottom等屬性的值來實(shí)現(xiàn)水平或垂直方向的滑動(dòng)效果。同時(shí)我們還可以利用opacity屬性來實(shí)現(xiàn)淡入淡出的效果。最后，除了linear-gradient，我們還可以使用radial-gradient、repeating-linear-gradient等CSS漸變效果。因此，你可以進(jìn)一步擴(kuò)展滑動(dòng)效果，發(fā)揮你的創(chuàng)意。