CSS屏風(fēng)打開(kāi)是Web設(shè)計(jì)中常用的一種效果。它可以用來(lái)在網(wǎng)頁(yè)上創(chuàng)建菜單、標(biāo)簽、彈出窗口等，使網(wǎng)頁(yè)更加豐富多彩。接下來(lái)，我們將介紹如何使用CSS來(lái)實(shí)現(xiàn)屏風(fēng)打開(kāi)的效果。

/* 初始化樣式 */
.fence {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
transition: opacity ease-in-out .3s;
z-index: 1;
}
.fence h2 {
margin-top: 50px;
text-align: center;
font-size: 24px;
}
.fence .close {
position: absolute;
top: 20px;
right: 20px;
font-size: 24px;
cursor: pointer;
}
/* 屏風(fēng)打開(kāi)效果 */
.fence.active {
opacity: 1;
visibility: visible;
}
.fence.active .container {
animation: 0.6s ease-in-out 1 normal forwards running scale;
}
@keyframes scale {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}

首先，我們創(chuàng)建了一個(gè)名為fence的div作為屏風(fēng)打開(kāi)的基礎(chǔ)結(jié)構(gòu)，并在其中添加了一個(gè)標(biāo)題h2以及關(guān)閉按鈕close。然后，我們給fence設(shè)置了一些基本樣式，包括設(shè)置position為fixed，使其在瀏覽器中始終保持固定的位置，同時(shí)將opacity和visibility設(shè)置為0，使其在最初狀態(tài)下不可見(jiàn)。

接著，我們定義了一個(gè)名為active的class，將其添加到fence中可以觸發(fā)屏風(fēng)打開(kāi)的效果。在active class中，我們使用了opacity和visibility屬性來(lái)將fence變?yōu)榭梢?jiàn)，同時(shí)利用CSS3動(dòng)畫(huà)scale將屏風(fēng)緩慢的展開(kāi)。

最后，在需要觸發(fā)屏風(fēng)打開(kāi)效果的元素中，我們可以使用JavaScript來(lái)添加和刪除active class來(lái)實(shí)現(xiàn)屏風(fēng)打開(kāi)效果的切換。