CSS全屏切換是一種十分流行的頁面轉(zhuǎn)場效果，在吸引用戶注意力的同時(shí)也增加了頁面的美感。下面我們將介紹如何使用HTML和CSS來實(shí)現(xiàn)一個(gè)簡單的全屏切換效果。

<div class="container">
<div class="page">
<p>第一頁內(nèi)容</p>
</div>
<div class="page">
<p>第二頁內(nèi)容</p>
</div>
<div class="page">
<p>第三頁內(nèi)容</p>
</div>
</div>

首先，在HTML中我們需要?jiǎng)?chuàng)建一個(gè)容器，容器內(nèi)部是三個(gè)頁面。這里我們給每個(gè)頁面添加了一個(gè)類名page，方便后面通過CSS進(jìn)行控制。

.container {
overflow: hidden;
}
.page {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
transition: transform 1s ease;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.page:nth-child(1) {
background-color: #ff5e5e;
}
.page:nth-child(2) {
background-color: #ffd152;
transform: translateX(100%);
}
.page:nth-child(3) {
background-color: #11c1f3;
transform: translateX(200%);
}
.page.active {
transform: translateX(0);
}

現(xiàn)在我們來講講CSS部分，我們首先給容器設(shè)置了overflow: hidden，這樣能保證第一頁顯示在頁面可見區(qū)域內(nèi)。然后我們給每個(gè)頁面設(shè)置了100vh的高度，這樣每個(gè)頁面高度都是整個(gè)頁面高度的1倍。我們還使用了flex布局，并設(shè)置了justify-content和align-items，以保證頁面內(nèi)容可居中顯示。

接下來我們使用了transition屬性，當(dāng)通過類名切換當(dāng)前頁面的時(shí)候，就能實(shí)現(xiàn)頁面轉(zhuǎn)場效果。我們給第二個(gè)和第三個(gè)頁面添加了transform屬性，這樣它們就會(huì)在頁面外面，并隨著頁面切換而滑入屏幕。而第一個(gè)頁面沒有設(shè)置transform屬性，所以它會(huì)一直保持在屏幕中央。

最后我們通過添加類名active來控制當(dāng)前頁面的顯示，使其從頁面外部滑入到屏幕中央。通過類名active的切換，我們就能實(shí)現(xiàn)全屏切換效果了。

總結(jié)一下，我們需要在HTML中創(chuàng)建一個(gè)容器，并在其中添加頁面元素，并利用CSS設(shè)置各個(gè)頁面的樣式和切換效果。通過添加類名來控制頁面的顯示和隱藏，從而實(shí)現(xiàn)全屏切換效果。