用CSS实现一个聚光灯效果

努力学习的k

已于 2022-07-15 12:54:26 修改

阅读量1.6k

点赞数 1

于 2022-07-15 12:53:45 首次发布

本文链接：https://blog.csdn.net/yigetutouzai/article/details/125801828

版权

今天又学习了一个使用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>