聚光灯效果

预览链接 (opens new window)

1. html部分

<div id="app" data-content="chrisworkalx">chrisworkalx</div>

2. css部分

:root {
  --grey-6: gray;
}

html,
body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#app {
  font-size: bold;
  width: max-content;
  color: var(--grey-6);
  position: relative;
  text-transform: uppercase;
  font-size: 100px;
}
#app::after {
  content: attr(data-content);
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to right,
    rgb(236, 72, 153),
    rgb(239, 68, 68),
    rgb(234, 179, 8)
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  clip-path: ellipse(100px 100px at 0% 50%);
  animation: move 3s ease-in infinite;
  text-transform: uppercase;
}

@keyframes move {
  50% {
    clip-path: ellipse(100px 100px at 100% 50%);
  }
  to {
    clip-path: ellipse(100px 100px at 0% 50%);
  }
}