CSS世界之文字聚光灯动画

效果展示

View Room

实现思路

使用 background-clip 和 clip-path ，并配合 animation，实现聚光灯效果

还使用了 CSS 表达式 attr() 来获取元素文本，具体使用方法请参考 MDN-attr

text-transform: uppercase; 是为了使文本内容全部大写

实现代码

1
<div class="spotlight" data-text="View Room">View Room</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.spotlight{
  color: #f1f3f7;
  font-size: 40px;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
}
.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%);
  }
}