パーツ番号 07-10-09 ・ CSSのみ

色調が周期的に変化する背景+白抜きテキスト

hue-rotateで背景の色合いがゆっくり循環し、白抜き文字が常に映える演出。WordPressのイベント告知やキャンペーンページのアイキャッチに使える。

css

プレビュー

ソースコード

HTML

<div class="d07-10-09-bg"></div>
        <h4 class="d07-10-09-text">MOTION</h4>

CSS

.d07-10-09{background:#0f172a}
        .d07-10-09-bg{position:absolute;inset:0;background:linear-gradient(135deg,#ef4444,#f59e0b,#10b981,#3b82f6,#a855f7);background-size:300% 300%;animation:d1339move 10s ease-in-out infinite,d1339hue 12s linear infinite}
        .d07-10-09-text{position:relative;z-index:1;margin:0;color:#fff;font-size:32px;font-weight:900;letter-spacing:.08em;text-shadow:0 4px 16px rgba(0,0,0,.45),0 0 40px rgba(0,0,0,.25)}
        @keyframes d1339move{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
        @keyframes d1339hue{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}
        @media (prefers-reduced-motion: reduce){
          .d07-10-09-bg{animation:none;background-position:50% 50%;filter:none}
        }

クラス名 .d07-10-09 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。