css实现“剧透”效果

演示效果如下:

在需要隐藏的文字加入div标签，并设置

黑色

或

模糊样式

, 通过:hover覆盖样式

html

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css实现剧透效果</title>
    <style>
        .spoiler_black {
            background-color: black;
            color: black;
            padding: 0 3px;
            margin: 0 3px;
            transition: color 0.5s ease; /* 平滑过渡效果 */
        }
        .spoiler_black:hover {
            color: white !important;
        }


        .spoiler {
            position: relative; /* 使得伪元素可以定位 */
            background-color: rgba(200, 200, 200, 0.3); /* 浅灰色半透明背景 */
            color: rgba(0, 0, 0, 0.5); /* 半透明黑色文字 */
            user-select: none; /* 禁止选中文字 */
            -webkit-user-select: none;
            overflow: hidden; /* 隐藏溢出的内容 */
            cursor: pointer; /* 鼠标悬停时光标变为手型 */
            filter: blur(3px); /* 添加模糊效果 */
            transition: filter 0.3s ease; /* 添加平滑过渡效果 */
        }

        .spoiler:hover {
            background-color: inherit; /* 悬停时使用父元素的背景色 */
            color: inherit; /* 悬停时显示原色 */
            filter: blur(0); /* 悬停消除模糊效果 */
        }
    </style>
</head>
<body>
    <div style="display: flex">
    在需要隐藏的文字加入div标签，并设置<div class="spoiler_black">黑色</div>或<div class="spoiler">模糊样式</div>, 通过:hover覆盖样式
    </div>
</body>
</html>

css实现“剧透”效果 ​

css实现“剧透”效果