如何让一段文字 利用CSS制作一个聚光灯效果

如何让一段文字利用CSS制作一个聚光灯效果第1张

要制作一个聚光灯效果，可以使用 CSS 中的 radial-gradient 属性来实现。以下是详细的步骤：

1. 创建 HTML 结构

首先，创建一个 HTML 文件，并添加一个 <div> 元素用于包裹要应用聚光灯效果的文字。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spotlight Effect</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div>
        <h1>Hello, World!</h1>
    </div>
</body>
</html>

2. 创建 CSS 样式

在同一目录下创建一个名为 styles.css 的 CSS 文件，并添加以下样式来定义聚光灯效果：

/* styles.css */
.spotlight {
    position: relative;
    width: fit-content; /* 使容器根据内容自适应宽度 */
}
.spotlight::before {
    content: ''; /* 伪元素用于创建聚光灯效果 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 0%, rgba(0, 0, 0, 0.8) 80%); /* 使用径向渐变创建聚
    光灯效果 */
    pointer-events: none; /* 使聚光灯效果不影响容器内部元素的交互 */
}