CSS黑幕效果

原创已于 2025-06-27 14:05:22 修改 · 331 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

于 2025-05-26 17:40:26 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS黑幕效果</title>
<style>
.heimu {
background-color: #252525;
color: #252525;
padding: 0 2px;
border-radius: 3px;
transition: color 0.3s;
cursor: pointer;
}

.heimu:hover {
color: #fff;
}

.heimu:hover::selection {
background: #666;
color: #fff;
}
</style>
</head>
<body>
<h1>CSS黑幕效果演示</h1>

<p>这是一个普通的段落，其中包含<span class="heimu">被黑幕遮住的内容</span>，鼠标悬停即可显示。</p>



<div class="heimu">
<p>这个整个div都是黑幕效果，鼠标移上来才能看到内容。</p>

</div>

<p>黑幕效果可以应用于任何文本元素，包括<span class="heimu">单个词语</span>或<span class="heimu">长段落</span>。</p>
</body>
</html>