滅屏效果是網(wǎng)頁開發(fā)中非常常見的一種效果，它可以讓用戶在觀看網(wǎng)頁的時候感受到不同于平常的視覺沖擊。如何使用js和css實現(xiàn)滅屏效果呢？

首先，我們需要實現(xiàn)一個半透明的遮罩，覆蓋整個頁面。我們可以使用一個絕對定位的div元素來實現(xiàn)這一目的，具體代碼如下：

<div id="mask" style="position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:99;"></div>

代碼中，我們設(shè)置了一個id為mask的div元素，并將它的position屬性設(shè)置為absolute，使得它的位置不會受到其他元素的影響，top和left屬性設(shè)置為0，使得它覆蓋整個頁面。background-color設(shè)置為rgba(0,0,0,0.5)，其中的最后一個參數(shù)0.5即為透明度，可以根據(jù)需要進行調(diào)整。z-index屬性設(shè)置為99，確保遮罩在其他元素之上。

接著，我們需要實現(xiàn)一個開關(guān)按鈕，讓用戶可以控制滅屏效果的開啟和關(guān)閉。我們可以使用一個checkbox元素來實現(xiàn)這一目的，具體代碼如下：

<input id="switch" type="checkbox" onchange="toggleMask()" style="position:fixed;top:10px;right:10px;z-index:100;"></input>
<label for="switch" style="position:fixed;top:10px;right:30px;z-index:100;">滅屏</label>

代碼中，我們設(shè)置了一個id為switch的checkbox元素，并將它的position屬性設(shè)置為fixed，使得它的位置不會隨著頁面滾動而改變。同時，我們還設(shè)置了一個label元素，并將它的for屬性設(shè)置為switch，使得用戶點擊label時，能夠自動選中switch元素。

最后，我們需要使用js來控制遮罩的顯示和隱藏。具體代碼如下：

function toggleMask() {
var mask = document.getElementById("mask");
if (mask.style.display === "none") {
mask.style.display = "block";
} else {
mask.style.display = "none";
}
}

代碼中，我們首先通過getElementById方法獲取到id為mask的元素。然后判斷它的display屬性是否為none，如果是，則將它的display屬性設(shè)置為block，使之顯示出來；如果不是，則將它的display屬性設(shè)置為none，使之隱藏起來。

到這里，我們的滅屏效果就實現(xiàn)了。需要注意的是，該效果實現(xiàn)的方式較為簡單，可能不太適用于復(fù)雜的網(wǎng)頁布局。如果需要實現(xiàn)更高級的滅屏效果，可以考慮使用javascript庫或框架來輔助實現(xiàn)。