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

リップル背景見出し

見出しの背後で波紋が絶えず広がり続ける演出。お知らせセクションやライブ配信・受付中バッジ周りの見出しに注目を集めます。

css

プレビュー

ソースコード

HTML

<div class="d02-01-17-stage">
          <span class="d02-01-17-ripple"></span>
          <span class="d02-01-17-ripple"></span>
          <span class="d02-01-17-ripple"></span>
          <h4 class="d02-01-17-h">お知らせ</h4>
        </div>

CSS

.prev.d02-01-17{ background:#eef2ff; }
        .d02-01-17 .d02-01-17-stage{
          position:relative;
          display:flex;
          align-items:center;
          justify-content:center;
          height:140px;
        }
        .d02-01-17 .d02-01-17-ripple{
          position:absolute;
          width:60px; height:60px;
          border-radius:50%;
          border:2px solid #6366f1;
          opacity:0;
          animation:d02-01-17-spread 3s ease-out infinite;
        }
        .d02-01-17 .d02-01-17-ripple:nth-child(2){ animation-delay:1s; }
        .d02-01-17 .d02-01-17-ripple:nth-child(3){ animation-delay:2s; }
        @keyframes d02-01-17-spread{
          0%{ transform:scale(.3); opacity:.6; }
          100%{ transform:scale(3.2); opacity:0; }
        }
        .d02-01-17 .d02-01-17-h{
          position:relative;
          z-index:1;
          font-size:24px;
          font-weight:800;
          color:#312e81;
          letter-spacing:.06em;
          background:#eef2ff;
          padding:6px 16px;
        }

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