パーツ番号 02-02-09 ・ CSSのみ

背景切り抜き文字(ムービングマスク)

文字の内側で色鮮やかなグラデーションが流れ続けて見えます。WordPressのシーズン特集やイベント見出しに躍動感を持たせられます。

autocss

プレビュー

ソースコード

HTML

<h4 class="d02-02-09-txt">SUMMER</h4>

CSS

.d02-02-09{background:#1e1b4b}
        .d02-02-09-txt{margin:0;font-size:52px;font-weight:900;letter-spacing:2px;
          background:linear-gradient(90deg,#f472b6,#fbbf24,#34d399,#38bdf8,#f472b6);
          background-size:300% 100%;
          -webkit-background-clip:text;background-clip:text;color:transparent;
          animation:d189move 6s linear infinite}
        @keyframes d189move{0%{background-position:0 0}100%{background-position:300% 0}}

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