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

動画背景セクション風

グラデーションがゆっくり動く背景の上にテキストと疑似再生ボタンを配置。WordPressのヒーローに動画背景ふうの演出を軽量に加えたいときに。

css

プレビュー

ソースコード

HTML

<div class="d07-03-04-hero">
          <div class="d07-03-04-content">
            <p class="d07-03-04-lead">FEATURE MOVIE</p>
            <h4>私たちのストーリー</h4>
            <button class="d07-03-04-play" aria-label="再生">
              <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
            </button>
          </div>
        </div>

CSS

.prev.d07-03-04{padding:0}
        .d07-03-04-hero{width:100%;height:260px;display:flex;align-items:center;justify-content:center;
          background:linear-gradient(120deg,#0ea5e9,#6366f1,#a855f7,#ec4899);background-size:300% 300%;
          animation:d07-03-04-flow 9s ease infinite;position:relative;overflow:hidden}
        .d07-03-04-hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.25)}
        .d07-03-04-content{position:relative;z-index:2;text-align:center;color:#fff}
        .d07-03-04-lead{letter-spacing:.3em;font-size:.7rem;opacity:.85;margin:0 0 6px}
        .d07-03-04-content h4{margin:0 0 16px;font-size:1.4rem}
        .d07-03-04-play{width:58px;height:58px;border:2px solid #fff;border-radius:50%;background:rgba(255,255,255,.18);
          cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .3s}
        .d07-03-04-play svg{width:24px;height:24px;fill:#fff;margin-left:3px}
        .d07-03-04-play:hover{background:rgba(255,255,255,.35)}
        @keyframes d07-03-04-flow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

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