ずっとレインボーに光り輝く

テキストがずっと虹色に変色するアニメーションをつけます。

1. 見出しウィジットのクラス名を「rainbow-text」としておく

2. 以下のCSSを入れる

HTML

<style>
.rainbow-text {
 background: linear-gradient(100deg, #17c9ff 0%, #8f6bff 28%, #ff6fd8 55%, #ffe07b 78%, #17c9ff 100%);
 background-size: 400% 100%; 
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow-bg 8s linear infinite;
}
@keyframes rainbow-bg {
  0% { background-position: 0% 0; }
  100% { background-position: -400% 0; }
}
</style>

<style>
.rainbow-text {
 background: linear-gradient(100deg, #17c9ff 0%, #8f6bff 28%, #ff6fd8 55%, #ffe07b 78%, #17c9ff 100%);
 background-size: 400% 100%; 
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow-bg 8s linear infinite;
}
@keyframes rainbow-bg {
  0% { background-position: 0% 0; }
  100% { background-position: -400% 0; }
}
</style>