パーツ番号 01-01-06 ・ CSSのみ

Ken Burnsヒーロー

写真風の背景がゆっくりズーム&パンし、映像のような余韻を演出。WordPressのホテル・レストラン系テーマのメインビジュアルにおすすめです。

css

プレビュー

ソースコード

HTML

<div class="d01-01-06-hero">
          <div class="d01-01-06-photo"></div>
          <div class="d01-01-06-inner">
            <span class="d01-01-06-sub">SINCE 2010</span>
            <h1>時を超える、上質。</h1>
          </div>
        </div>

CSS

.prev.d01-01-06{padding:0;display:block;min-height:320px}
        .d01-01-06-hero{position:relative;height:320px;overflow:hidden;display:flex;align-items:center;justify-content:center}
        .d01-01-06-photo{position:absolute;inset:0;
          background:
            radial-gradient(ellipse 60% 45% at 68% 30%,rgba(255,224,178,.75),transparent 65%),
            radial-gradient(ellipse 70% 60% at 25% 80%,rgba(38,70,83,.9),transparent 70%),
            linear-gradient(160deg,#e9c46a 0%,#f4a261 35%,#e76f51 65%,#264653 100%);
          animation:d01-01-06-kb 6s ease-in-out infinite alternate}
        @keyframes d01-01-06-kb{
          0%{transform:scale(1) translate(0,0)}
          100%{transform:scale(1.22) translate(-4%,3%)}
        }
        .d01-01-06-inner{position:relative;text-align:center;padding:24px}
        .d01-01-06-sub{display:block;color:rgba(255,255,255,.85);font-size:11px;letter-spacing:.4em;margin-bottom:12px}
        .d01-01-06-hero h1{color:#fff;font-size:27px;font-weight:700;letter-spacing:.14em;margin:0;text-shadow:0 2px 16px rgba(0,0,0,.35)}

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