パーツ番号 07-12-07 ・ CSSのみ

波紋が広がる再生ボタン

中央の再生ボタンから波紋のリングが繰り返し広がって消えていく演出です。動画・ポッドキャストの再生開始ボタンの目印に使えます。

css

プレビュー

ソースコード

HTML

<div class="ripplewrap07-12-07">
          <span class="ring07-12-07" style="animation-delay:0s"></span>
          <span class="ring07-12-07" style="animation-delay:-0.8s"></span>
          <span class="ring07-12-07" style="animation-delay:-1.6s"></span>
          <div class="playbtn07-12-07">▶</div>
        </div>

CSS

.d07-12-07{ background:#111827; }
        .d07-12-07 .ripplewrap07-12-07{ position:relative; width:120px; height:120px; display:flex; align-items:center; justify-content:center; }
        .d07-12-07 .ring07-12-07{ position:absolute; width:70px; height:70px; border-radius:50%; border:2px solid #38bdf8; opacity:0; animation:ripple07-12-07 2.4s ease-out infinite; }
        @keyframes ripple07-12-07{
          0%{ transform:scale(0.6); opacity:.7; }
          100%{ transform:scale(1.6); opacity:0; }
        }
        .d07-12-07 .playbtn07-12-07{ position:relative; z-index:2; width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,#38bdf8,#0ea5e9); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; box-shadow:0 6px 18px rgba(14,165,233,.5); }
        @media (prefers-reduced-motion: reduce){
          .d07-12-07 .ring07-12-07{ animation:none; opacity:0; }
        }

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