隨著移動設備的普及，頁面滑動的需求越來越多。頁面滑動一般有兩種實現方式：

第一種就是使用javascript來實現，比如利用jQuery插件scrollTo、iScroll等來完成。

$(document).ready(function(){
$('#content').scrollTo(500);
});

這種方式實現簡單，但是需要引入javascript插件，而且在移動端性能和流暢度也有一定限制。

第二種方式就是使用CSS3的新特性來實現頁面滑動效果，這種方式更加簡單和輕量級。

下面是一個利用CSS3的transform和transition屬性實現的頁面滑動效果：

.container {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.container >div {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transform: translateX(0);
transition: transform ease-out 0.3s;
}
.container >div:nth-child(1) {
background-color: #FF0000;
}
.container >div:nth-child(2) {
background-color: #00FF00;
transform: translateX(100%);
}
.container >div:nth-child(3) {
background-color: #0000FF;
transform: translateX(200%);
}
.container >div.active {
transform: translateX(-100%);
}

在代碼中，我們首先定義了一個.container的div來包裹所有的頁面內容。每一個頁面都是一個單獨的div，并且默認都是水平排列的。其中第一個頁面（即第一個div）默認顯示，其他的都通過transform: translateX()屬性隱藏在頁面之外。

當我們需要滑動到其他頁面時，添加.active類名即可實現滑動效果，通過對當前頁面和目標頁面的transform屬性進行調整實現頁面滑動動畫。

綜上所述，通過利用CSS3的transform和transition屬性可以輕松實現頁面滑動效果，同時代碼也更加簡潔輕便。在移動端體驗也更加流暢。