在现代网页设计中，半透明遮罩蒙层效果是一种非常流行的交互方式。它能够有效地吸引用户的注意力，并提升用户体验。今天，我们将通过简单的HTML和CSS代码，来实现一个点击按钮后显示半透明遮罩的效果。
首先，我们需要创建一个基本的HTML结构。在这个结构中，我们将有一个按钮用于触发遮罩的显示，以及一个用于显示遮罩的容器。以下是基础的HTML代码：
```html
<script src="script.js"></script>
```
接下来，我们使用CSS来定义遮罩的样式。这里的关键是设置遮罩的背景颜色为半透明，同时确保它覆盖整个页面。以下是CSS代码：
```css
/ styles.css /
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.container {
position: relative;
width: 100%;
height: 100vh;
}
showMask {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px 20px;
background-color: 007BFF;
color: white;
border: none;
cursor: pointer;
}
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); / 半透明黑色 /
display: none;
}
```
最后，我们需要添加一些JavaScript代码来控制遮罩的显示和隐藏。当用户点击按钮时，遮罩会显示；再次点击时，遮罩会隐藏。以下是JavaScript代码：
```javascript
// script.js
document.getElementById('showMask').addEventListener('click', function() {
var mask = document.getElementById('mask');
if (mask.style.display === 'none' || mask.style.display === '') {
mask.style.display = 'block';
} else {
mask.style.display = 'none';
}
});
```
通过以上步骤，我们就成功地实现了一个点击按钮显示半透明遮罩的效果。这种效果不仅简单易用，还能为网站增添更多的互动性和视觉吸引力。
希望这篇文章能满足您的需求！如果有任何进一步的要求或修改建议，请随时告知。
