(CSS) Buat teks warna bersinar-sinar

Teks demo ini boleh menyilaukan mata. Lihat dengan risiko sendiri atau jangan lihat lelama.

Demo (dgn ayat contoh)

Jangan Perasan..

HTML view ▼

<div class="labu">
  <svg width="0" height="0">
  <filter id="f" x="-50%" y="-200%" width="200%" height="500%">
    <feGaussianBlur stdDeviation="35"></feGaussianBlur>
    <feColorMatrix type="saturate" values="1.3"></feColorMatrix>
    <feComposite in="SourceGraphic"></feComposite>
  </filter>
</svg>
<h1>Jangan Perasan..</h1>
</div>
<style>
  .labu {
    background: #FEF0EC;
    border-radius: 8px;
  }
  @property --k {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}
svg[height="0"] {
  position: absolute;
}
h1 {
  --k: 0;
  place-self: center;
  background: linear-gradient(90deg, hsl(calc(var(--k)*1turn), 95%, 65%), hsl(calc(var(--k)*1turn + 90deg), 95%, 65%));
  -webkit-background-clip: text;
  color: transparent;
  font: 900 clamp(.875em, 7.25vw, 5em) arial black, sans-serif;
  filter: url(#f);
  text-align: center;
  
  /* Firefox not quite there yet, but it's coming */
  animation: k 4s linear infinite;
}
@keyframes k {
  to {
    --k: 1 ;
  }
}
</style>

Tutup

CSS dirujuk di codepen.io/thebabydino/pen/rNPOpJK