色相が回り続けるタイトル
これは文字の色が連続的に移り変わる、カラフルなタイトルです。基準色を 1 つ置き、 @keyframes で filter:hue-rotate を 0 度から 360 度まで回し続けることで、色相環をぐるりと一周する虹のような色変化を作っています。
解説
これは文字の色が連続的に移り変わる、カラフルなタイトルです。基準色を 1 つ置き、@keyframesでfilter:hue-rotateを 0 度から 360 度まで回し続けることで、色相環をぐるりと一周する虹のような色変化を作っています。linearで一定速度に回るためムラがなく、CSS のみで JavaScript は不要です。
仕組みは色相を回すだけなので、基準色を変えればパレット全体の色味も連動して変わります。
使う場面とカスタマイズ
- エンタメ・ゲーム・SNS イベントなど派手な演出が欲しい見出し
- 変化の速さは
animationの 4 秒を増減して調整 - 初期色は
colorを変えると巡る色域がずれる
注意点として、色が変わり続けるため背景とのコントラストが瞬間的に落ちる場面があり、可読性が安定しません。重要な情報より装飾的な見出しに向きます。常時動くのでprefers-reduced-motionでは色変化を止めて固定色にする代替を用意すると、点滅や激しい色変化が苦手な人にも配慮できます。
使用例・適したシーン
- ヒーローセクションのキャッチコピー
- セクション見出し
- 記事タイトル・ブログのリード
- コーポレートサイトのキービジュアル
よくある質問
色が変わる速さを調整できますか
できます。@keyframes を呼び出す animation の 4s が色相を一周する時間です。短くすると目まぐるしく色が変わり、長くするとゆっくり移ろいます。linear なので一定速度で回りますが、別のイージングに変えると変化に強弱をつけることもできます。
巡る色の範囲を変えられますか
変えられます。基準となる color を別の色に変えると、そこを起点に色相が回るため見える色域がずれます。hue-rotate は元の色相を回転させる仕組みなので、出したい色味に近い基準色を選ぶと狙った範囲の色変化に近づけられます。