用CSS实现一个聚光灯效果

今天又学习了一个使用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 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

就是对元素的内容进行裁剪，保留裁剪的部分显示。

想要详细了解的话，可以参考

clip-path - CSS（层叠样式表） | MDN

我们这里为.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>