全屏滾動(dòng)是現(xiàn)代網(wǎng)頁設(shè)計(jì)越來越流行的一個(gè)特效。但是實(shí)現(xiàn)這個(gè)特效又不是很容易，因?yàn)樾枰幚眄撁娴臐L動(dòng)、元素的透明度和動(dòng)畫效果等。CSS技術(shù)可以幫助我們輕松實(shí)現(xiàn)全屏滾動(dòng)效果。下面是css全屏滾動(dòng)代碼：

html,body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
section {
position: relative;
width: 100%;
height: 100%;
}
section div {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
section div.active {
opacity: 1;
}

這段代碼中，我們首先將整個(gè)網(wǎng)頁html和body的高度設(shè)為100%。然后使用了overflow:hidden來隱藏頁面的滾動(dòng)條，防止用戶通過滾動(dòng)條來滾動(dòng)頁面。接下來，我們使用了HTML5新標(biāo)簽section來作為每一屏的容器，利用了它的相對(duì)定位屬性，讓內(nèi)部元素進(jìn)行絕對(duì)定位。因?yàn)椤敖^對(duì)定位”是相對(duì)于“相對(duì)定位”的父容器而言的，我們利用這個(gè)特點(diǎn)來實(shí)現(xiàn)單屏滾動(dòng)的效果。最后，我們使用了CSS3的過渡效果來處理頁面元素的動(dòng)畫效果。當(dāng)我們把hover事件添加到.section div.active上時(shí)，就能實(shí)現(xiàn)每個(gè)頁面的切換效果。