今天又学习了一个使用CSS实现的聚光灯特效，来一起看看把，效果如下：
实现步骤
1. 构建结构
<body>
<h1 class="spotlight" data-content="CSS聚光灯">CSS聚光灯</h1>
</body>这个特效的结构很简单，就是使用一个h1标签套入就行了，至于为什么有个自定义属性data-content，先不着急，后面揭晓
2. 编写CSS样式
先设置好一些全局的样式，
html {
font-size: 10px;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: #222;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}然后设置一下底部文字的样式
.spotlight {
color: #444;
font-size: 12rem;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
letter-spacing: -0.2rem;
}一开始的效果：
接下来添加伪元素after样式：
.spotlight:after {
content: attr(data-content);
color: yellow;
}在content属性中使用了attr()函数，里面的参数data-content就是.spotlight节点上面添加的自定义属性，
接下来为伪元素添加绝对定位，top和left都设为0，这样两段文字就重叠了，
position: absolute;
top: 0;
left: 0;伪元素的内容会覆盖原来的内容
接下来就要进入关键的地方了
在CSS3中，有一个clip-path属性，MDN中是这样描述的：
clip-path：CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。
就是对元素的内容进行裁剪，保留裁剪的部分显示。
想要详细了解的话，可以参考
我们这里为.spotlight:after添加以下样式：
clip-path: ellipse(12rem 10rem at 50% 50%);
-webkit-clip-path: ellipse(12rem 10rem at -0% 50%);这里由于兼容性问题，需要添加前缀属性-webkit-
可以看到，添加了clip-path属性后伪元素的内容只剩下裁剪的部分显示，其他的部分隐藏住了，底下原来的内容就出来了，
接着把clip-path属性改为：
clip-path: ellipse(12rem 10rem at -0% 50%);
-webkit-clip-path: ellipse(12rem 10rem at -0% 50%);把聚光灯定位在起始位置：
基本的静态效果就写好了。
接下来就是动态效果的实现
既然要实现动画，就要使用到animation属性了，
下面先来定义一个@keyframes:
@keyframes spotlight {
0% {
clip-path: ellipse(12rem 10rem at -0% 50%);
-webkit-clip-path: ellipse(12rem 10rem at -0% 50%);
}
50% {
clip-path: ellipse(12rem 10rem at 100% 50%);
-webkit-clip-path: ellipse(12rem 10rem at 100% 50%);
}
100% {
clip-path: ellipse(12rem 10rem at 0% 50%);
-webkit-clip-path: ellipse(12rem 10rem at -0% 50%);
}
}在.spotlight:after中添加animation属性
animation: spotlight 10s infinite;10s一个来回，且循环播放
这时候已经能够动起来了，但是没有上面的那种渐变的效果
接下来实现渐变的特效
思路也很简单，给伪元素添加渐变背景图片，将文字颜色设成透明，然后使用background-clip属性设置背景的裁剪区域，
background-clip设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。
如果需要详细了解，可以参考：background-clip - CSS（层叠样式表） | MDN
首先我们需要找一张好看的渐变背景图片，我是在unsplash上找的：
然后给.spotlight:after添加样式：
background-image: url(https://dogefs.s3.ladydaily.com/~/source/unsplash/photo-1579546929518-9e396f3cc809?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Z3JhZGllbnR8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=80);
background-size: 100%;
background-position: center center;
background-clip: text;
-webkit-background-clip: text;
color: transparent;这样就能够实现和开头一样的效果啦
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css聚光灯</title>
<style>
html {
font-size: 10px;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: #222;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.spotlight {
color: #444;
font-size: 12rem;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
letter-spacing: -0.2rem;
}
.spotlight:after {
content: attr(data-content);
color: transparent;
position: absolute;
top: 0;
left: 0;
clip-path: ellipse(12rem 10rem at -0% 50%);
-webkit-clip-path: ellipse(12rem 10rem at -0% 50%);
animation: spotlight 10s infinite;
background-image: url(https://dogefs.s3.ladydaily.com/~/source/unsplash/photo-1579546929518-9e396f3cc809?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Z3JhZGllbnR8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=80);
background-size: 100%;
background-position: center center;
background-clip: text;
-webkit-background-clip: text;
}
@keyframes spotlight {
0% {
clip-path: ellipse(12rem 10rem at -0% 50%);
-webkit-clip-path: ellipse(12rem 10rem at -0% 50%);
}
50% {
clip-path: ellipse(12rem 10rem at 100% 50%);
-webkit-clip-path: ellipse(12rem 10rem at 100% 50%);
}
100% {
clip-path: ellipse(12rem 10rem at 0% 50%);
-webkit-clip-path: ellipse(12rem 10rem at -0% 50%);
}
}
</style>
</head>
<body>
<h1 class="spotlight" data-content="CSS聚光灯">CSS聚光灯</h1>
</body>
</html>