パーツ番号 02-01-03 ・ CSSのみ

流れるグラデーションテキスト

background-clip:text で文字にグラデーションを流し続けます。トップページのキャッチコピーやヒーロー見出しに最適。

css

プレビュー

ソースコード

HTML

<h4 class="d02-01-03-h">未来を、デザインする。</h4>

CSS

.prev.d02-01-03{ background:#0f1222; }
        .d02-01-03 .d02-01-03-h{
          font-size:32px;
          font-weight:800;
          letter-spacing:.04em;
          background:linear-gradient(90deg,#38bdf8,#a78bfa,#f472b6,#38bdf8);
          background-size:300% 100%;
          -webkit-background-clip:text;
          background-clip:text;
          -webkit-text-fill-color:transparent;
          color:transparent;
          animation:d02-01-03-flow 5s linear infinite;
        }
        @keyframes d02-01-03-flow{
          0%{ background-position:0% 50%; }
          100%{ background-position:300% 50%; }
        }

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