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

スプリットカラー見出し

見出しの左右で色が異なり、その境界線がゆらゆらと常時揺れ続けるスプリットカラー演出。2色ブランドの会社やデュアル事業サイトのタイトルに。

autocss

プレビュー

ソースコード

HTML

<h4 class="d02-01-15-h" data-text="デザインと機能性。">デザインと機能性。</h4>

CSS

.prev.d02-01-15{ background:#f8f9fc; }
        .d02-01-15 .d02-01-15-h{
          position:relative;
          display:inline-block;
          font-size:28px;
          font-weight:800;
          letter-spacing:.04em;
          color:#1a2333;
        }
        .d02-01-15 .d02-01-15-h::after{
          content:attr(data-text);
          position:absolute;
          inset:0;
          color:#f472b6;
          clip-path:polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
          animation:d02-01-15-wave 3.6s ease-in-out infinite;
        }
        @keyframes d02-01-15-wave{
          0%,100%{ clip-path:polygon(50% 0%,100% 0%,100% 100%,50% 100%); }
          25%{ clip-path:polygon(56% 0%,100% 0%,100% 100%,44% 100%); }
          50%{ clip-path:polygon(50% 0%,100% 0%,100% 100%,50% 100%); }
          75%{ clip-path:polygon(44% 0%,100% 0%,100% 100%,56% 100%); }
        }

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