[CSS]聚光灯效果

大部分情况下，项目中用不到这些看起来稍微花哨一些的效果，但多看看多知道点总是没有坏处的嘛！

文本颜色渐变

从图上我们可以看出，文本颜色是有渐变效果的，这个大家应该都知道怎么实现：

color: transparent;
background-image: linear-gradient(90deg, red, green);
background-clip: text;

背景图片background-image在text区域显示，文本的color设置为transparent就行了。

灰色和彩色文本

这个其实就是2个相同的文本，叠加到一起就行了：

<div class="title">[CSS]聚光灯效果</div>

html {
    font-size: 14px;
}
body {
    background-color: #222;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}
.title {
    color: #333;
    font-size: 8rem;
    position: relative;
}
.title::after {
    content: '[CSS]聚光灯效果';
    position: absolute;
    left: 0;
    top: 0;
    color: transparent;
    background-image: linear-gradient(90deg, red, green);
    background-clip: text;
}

content除了直接指定具体的内容，还可以用attr()来使用元素上的属性值。
所以这里，我们也可以把文本写到自定义属性中去，比如：

<div class="title" data-title="[CSS]聚光灯效果">[CSS]聚光灯效果</div>

.title::after {
    content: attr(data-title);
}

圆形（聚光灯）的显示区域

css中有一个属性是可以控制显示区域的，当然了，一般这种属性，都是叫什么什么clip，裁剪区域，类似于文本颜色渐变中我们使用的background-clip。

这个属性就是clip-path

clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。 developer.mozilla.org/zh-CN/docs/…

可以指定比较规则的显示区域，比如circle圆、ellipsis椭圆、rect矩形、polygon多边形，也可以通过使用path, polygon(svg)使用任意图形。

聚光灯的话，我们直接使用circle就行了，然后在用animation实现一下动画效果。

.title::after {
    content: '[CSS]聚光灯效果';
    position: absolute;
    left: 0;
    top: 0;
    color: transparent;
    background-image: linear-gradient(90deg, red, green);
    background-clip: text;
    clip-path: circle(100px at 0 50%);
    animation: spotlight 5s infinite;
}
@keyframes spotlight {
    0% {
      clip-path: circle(100px at 0 50%);
    }
    50% {
      clip-path: circle(100px at 100% 50%);
    }
    100% {
      clip-path: circle(100px at 0 50%);
    }
}

背景图片background-image我们可以自己写渐变效果，当然，我们也可以去网上找一张渐变颜色的图片。比如我就直接搜的渐变颜色图片，选了一张看起来还能用的：

background-image: url(https://bpic.588ku.com/back_pic/06/09/64/236152a1bbf28a7.jpg);
background-position: center center;

结束