探索CSS魔法之路--聚光灯文字特效

最近对css特效感兴趣，研究一下,分享一个比较简单的案例

1、首页准备好布局

这个布局很简单，一个文字，水平垂直居中

 <!-- 使用data属性存储聚光灯效果的文本内容 -->
    <h1 data-spotlight="Bubble!">Bubble</h1>

2、基础css

然后重置一下样式，准备基础布局css

  /* 重置所有元素的样式，确保一致的盒模型和对齐 */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* 设置body的基本样式，使其内容居中显示，并填充整个视口高度 */
body {
    display: flex;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: #222;
}

/* 定义h1元素的样式，包括字体大小、颜色和字间距 */
h1 {
    position: relative;
    font-size: 240px;
    color: #444;
    letter-spacing: 10px;
}

此时界面是这样的

3、我们给这段文字加个伪元素

h1::after {
        content: attr(data-spotlight);
        color: cyan;
        position: absolute;
        left: 0;
        top: 0;
    }

然后我们的界面就变成了这样，我们把伪元素的文字定位到h1元素上面，并充分遮盖住

4、clip-path属性

为了让青色文字只在某个部分区域显示，我们设置clip-path属性，

h1::after {
    content: attr(data-spotlight);
    color: cyan;
    position: absolute;
    left: 0;
    top: 0;
    clip-path: ellipse(80px 80px at 0% 50%);
    }

然后就变成这样，会出现一个椭圆形的青色光斑

clip-path 属性用于定义一个元素的可见区域。在这个区域内，元素的内容是可见的；而在区域外，元素的内容会被裁剪掉。clip-path 可以创建各种形状，如矩形、圆形、椭圆、多边形等。

clip-path: ellipse(80px 80px at 0% 50%);

• ellipse：表示创建一个椭圆。
• 80px 80px：椭圆的宽度和高度，分别为 80 像素。
• at 0% 50% ：椭圆的中心位置，相对于伪元素的左上角。
  • 0%：水平方向上的起始位置，即椭圆的中心在伪元素的最左边。
  • 50%：垂直方向上的中间位置，即椭圆的中心在伪元素的垂直方向的中间。

效果说明

• 可见区域：只有在椭圆内的内容是可见的，椭圆外的内容会被裁剪掉。
• 位置：椭圆的中心位于伪元素的左边缘和垂直方向的中间位置。
• 大小：椭圆的宽度和高度都是 80 像素。

5、最后，我们加个动画

/* 使用伪元素实现聚光灯效果，通过clip-path和animation控制光斑的移动 */
h1::after {
    content: attr(data-spotlight);
    color: cyan;
    position: absolute;
    left: 0;
    top: 0;
    clip-path: ellipse(80px 80px at 0% 50%);
    animation: spotlight 5s infinite;
}

/* 定义聚光灯动画的关键帧，模拟光斑从左到右的移动 */
@keyframes spotlight {
    0% {
        clip-path: ellipse(80px 80px at 0% 50%);
    }
    50% {
        clip-path: ellipse(120px 120px at 100% 50%);
    }
    100% {
        clip-path: ellipse(80px 80px at 0% 50%);
    }
}