在網頁的設計中，很多時候需要有些動效來增加用戶體驗的好感度。其中，滑動效果可以讓頁面更加流暢美觀。在CSS中，我們可以通過一些簡單的設置來實現自動滑動效果。

/*CSS代碼*/
.slider {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.slider ul {
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
animation: slide 5s infinite;
}
.slider ul li {
flex-shrink: 0;
width: 100%;
height: 100%;
list-style-type: none;
}
.slider ul li:nth-of-type(1) {
background-color: #F6C2B6;
}
.slider ul li:nth-of-type(2) {
background-color: #FCB1AA;
animation-delay: 2s;
}
.slider ul li:nth-of-type(3) {
background-color: #E78070;
animation-delay: 4s;
}
@keyframes slide {
0% {
transform: translateX(0%);
}
33.33333% {
transform: translateX(-100%);
}
66.66667% {
transform: translateX(-200%);
}
100% {
transform: translateX(-300%);
}
}

上述CSS代碼中，我們定義了一個.slider類，包含了一個ul和幾個li元素。其中，ul元素是通過設置絕對定位來將li元素在橫向上排列的。通過animation屬性，我們給ul元素添加了一個名為slide的動畫效果，時長為5秒，無限循環播放。

在keyframes中，我們定義了從0%到100%的過渡狀態，也就是從左到右滑動的過程。通過這樣的方式，我們就實現了一個簡單的自動滑動效果。

最后，我們將ul元素作為.slider類的子元素，并給li元素添加了不同的背景顏色，就可以看到一個簡單的自動滑動效果了。在實際應用中可以根據需求添加更多的li元素，也可以調整滑動速度和動畫時長，來實現更多樣化的滑動效果。