パーツ番号 07-10-03 ・ CSSのみ

動く背景+パルス再生ボタン

ゆっくり動く背景の中央で再生ボタンがパルスして注目を集める演出。WordPressの動画紹介セクションやインタビュー記事のサムネイルに使える。

css

プレビュー

ソースコード

HTML

<div class="d07-10-03-bg"></div>
        <button class="d07-10-03-play" type="button" aria-label="再生">
          <span class="d07-10-03-ring"></span>
          <span class="d07-10-03-tri"></span>
        </button>

CSS

.d07-10-03{background:#0c4a6e}
        .d07-10-03-bg{position:absolute;inset:0;background:linear-gradient(115deg,#0c4a6e,#0891b2,#134e4a,#0c4a6e);background-size:300% 300%;animation:d1333move 15s ease-in-out infinite}
        .d07-10-03-play{position:relative;z-index:1;width:64px;height:64px;border:none;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;cursor:pointer}
        .d07-10-03-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.6);animation:d1333ring 2.2s ease-out infinite}
        .d07-10-03-tri{width:0;height:0;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent #fff;margin-left:4px}
        @keyframes d1333move{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
        @keyframes d1333ring{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.7);opacity:0}}
        @media (prefers-reduced-motion: reduce){
          .d07-10-03-bg{animation:none;background-position:50% 50%}
          .d07-10-03-ring{animation:none;opacity:0}
        }

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