文本模版：聚光灯

预览效果

<div class="container-spotlight">
  <div class="spotlight" data-text="View Room">View Room</div>
</div>

.container-spotlight {
  position: relative;
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.container-spotlight .spotlight {
  color: #f1f3f7;
  font-size: 40px;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
}
.container-spotlight .spotlight:before {
  content: attr(data-text);
  width: inherit;
  height: inherit;
  position: absolute;
  top: 0;
  left: 0;
  color: transparent;
  background-image: linear-gradient(
    90deg,
    #1e76e6 0%,
    #1fb2f0 30%,
    #27d3d9 66%,
    #1ff0bc 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  animation: spotlight 8s linear infinite;
}
@keyframes spotlight {
  0% {
    clip-path: ellipse(32px 32px at 0 50%);
  }
  50% {
    clip-path: ellipse(32px 32px at 100% 50%);
  }
  100% {
    clip-path: ellipse(32px 32px at 0 50%);
  }
}

代码解析

HTML 结构

这个文本聚光灯效果的 HTML 结构非常简洁：

1. 容器元素 (div.container-spotlight)：作为整个文本效果的外层容器，提供居中对齐的布局环境。
2. 文本元素 (div.spotlight)：包含实际显示的文本内容，并通过data-text属性定义了与文本内容相同的值，用于 CSS 伪元素中创建聚光效果。

CSS 实现原理

1. 布局设置：容器使用 flex 布局实现内容居中对齐，确保文本在页面中水平居中显示。
2. 基础文本样式：设置文本颜色、字体大小、字重和转换为大写字母的样式。
3. 聚光灯效果实现：
   • 使用::before伪元素和content: attr(data-text)创建一个与原文本完全相同的副本
   • 通过background-image和linear-gradient创建渐变色背景
   • 使用background-clip: text（及 WebKit 前缀版本）将渐变背景应用到文本上
   • 设置color: transparent使文本本身透明，只显示渐变背景
4. 动画效果：
   • 使用@keyframes spotlight定义了聚光灯动画
   • 通过clip-path: ellipse()创建一个椭圆剪裁区域
   • 动画使这个椭圆区域从文本左侧移动到右侧再回到左侧，模拟聚光灯扫过的效果
   • 设置animation: spotlight 8s linear infinite使动画持续 8 秒并无限循环

使用方法

1. 复制 HTML 结构：将 HTML 代码块中的容器和文本元素复制到你的网页中。
2. 添加 CSS 样式：将 CSS 代码块中的样式规则复制到你的样式表中。
3. 修改文本内容：将div.spotlight元素的内容和data-text属性值修改为你想要显示的文本。
4. 自定义视觉效果：可以通过修改渐变色、聚光灯大小、动画速度等参数来自定义聚光灯效果的外观。

浏览器兼容性

• 主流浏览器：此文本聚光灯效果在 Chrome、Firefox、Safari 和 Edge 等现代浏览器中具有良好的兼容性。
• IE 浏览器：由于使用了background-clip: text和clip-path等较新的 CSS 特性，在 Internet Explorer 中可能无法正常显示或需要额外的兼容性处理。
• 性能考虑：文本动画效果通常不会对性能产生显著影响，但在包含大量文本的页面上，建议进行性能测试和优化。