CSS動作遮簾是一種常見的網頁設計效果，通過鼠標懸停或點擊觸發的動作，可以使頁面元素出現或消失，形成獨特的視覺效果。下面介紹如何使用CSS實現動作遮簾效果：
<html>
<head>
<style>
.cover {
position: absolute; /* 絕對定位 */
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999; /* 層級最高 */
background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色遮罩 */
display: none; /* 初始時不顯示 */
}
.content {
position: relative; /* 相對定位 */
z-index: 1; /* 層級次高 */
}
.box {
background-color: #fff;
padding: 20px;
display: none; /* 初始時不顯示 */
position: absolute; /* 絕對定位，覆蓋在遮罩層上 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn:hover + .cover {
display: block; /* 鼠標懸停顯示遮罩 */
}
.btn.clicked + .content .box {
display: block; /* 點擊按鈕顯示內容框 */
}
</style>
</head>
<body>
<button class="btn">點擊顯示</button>
<div class="content">
<div class="box">
<p>這里是內容框</p>
</div>
</div>
<div class="cover"></div>
</body>
</html>代碼解釋：
1. 創建一個遮罩層和一個內容框，分別用.cover和.box表示。
2. 設置.cover為絕對定位和半透明黑色背景，初始時不顯示。設置.box為絕對定位，覆蓋在.cover上，也初始時不顯示。
3. 創建一個按鈕，用.btn表示。
4. 設置.btn:hover + .cover為鼠標懸停時.cover顯示。即當鼠標懸停在.btn上方時，.cover的display屬性為block。
5. 在.btn上點擊時，將.btn的狀態設為clicked。通過.clicked屬性作為選擇器，可以控制.box的顯示。
6. 設置.box的display屬性為none，只有當.btn被點擊后，.box的狀態才會設為display:block，從而顯示出來。
以上就是CSS動作遮簾的實現方法，通過學習這種特效可以使網頁看起來更加酷炫，吸引更多的用戶。