黑幕组件
组件介绍
用于遮挡文字内容的自定义 Web 组件，当用户将鼠标移入组件区域或通过触摸设备触碰组件时，遮挡层会移除并显示被遮挡的文字内容。
属性说明
| 属性 | 说明 |
|---|---|
| color (可选) | 遮罩层颜色，默认为黑色 (#000) |
| opacity (可选) | 遮罩层透明度，默认为 0.9 |
| speed (可选) | 显示/隐藏动画速度，默认为 0.3s |
使用示例
基础用法
这是一个秘密消息
当你将鼠标悬停在这个区域时，黑幕会自动移除，显示这段被隐藏的内容。这个功能非常适合用于剧透警告、答案揭示或者其他需要渐进式显示内容的场景。
在触摸设备上，你需要点击才能显示内容，再次点击可以重新遮挡。
自定义样式
自定义红色遮罩
这个示例使用了深红色遮罩，透明度为 80%，显示速度较慢（0.5 秒）。你可以根据需要调整这些参数来适应不同的设计需求。
快速显示模式
快速揭示内容
这个示例使用了非常快的显示速度（0.1 秒），适合需要快速响应的场景。遮罩层使用了深蓝色，透明度 95%，提供了强烈的遮挡效果。
HTML 代码
html
<!-- 基础用法 -->
<black-curtain>
<h4>这是一个秘密消息</h4>
<p>被隐藏的内容...</p>
</black-curtain>
<!-- 自定义样式 -->
<black-curtain color="#8b0000" opacity="0.8" speed="0.5s">
<h4>自定义红色遮罩</h4>
<p>自定义内容...</p>
</black-curtain>
<!-- 快速显示 -->
<black-curtain color="#2c3e50" opacity="0.95" speed="0.1s">
<h4>快速揭示</h4>
<p>快速显示内容...</p>
</black-curtain>功能特性
- 支持鼠标悬停和触摸点击两种交互方式
- 可自定义遮罩层颜色和透明度
- 可调节显示/隐藏动画速度
- 支持键盘无障碍操作（Enter/空格键）
- 响应式设计，适配各种设备
- 支持暗色模式
- 支持自定义事件监听