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

動く背景+ビネット効果

周囲を暗くするビネットを重ねて映画のような没入感を演出する背景。WordPressの映像制作会社やギャラリーサイトのトップ画面に使える。

cssdark

プレビュー

ソースコード

HTML

<div class="d07-10-08-bg"></div>
        <div class="d07-10-08-vignette"></div>
        <div class="d07-10-08-content">
          <span class="d07-10-08-icon">&#10022;</span>
          <p>Cinematic Look</p>
        </div>

CSS

.d07-10-08{background:#000}
        .d07-10-08-bg{position:absolute;inset:0;background:linear-gradient(125deg,#1e293b,#7c3aed,#0f172a);background-size:280% 280%;animation:d1338move 17s ease-in-out infinite}
        .d07-10-08-vignette{position:absolute;inset:0;background:radial-gradient(circle,transparent 35%,rgba(0,0,0,.75) 100%)}
        .d07-10-08-content{position:relative;z-index:1;text-align:center;color:#f5f3ff}
        .d07-10-08-icon{display:block;font-size:22px;margin-bottom:4px}
        .d07-10-08-content p{margin:0;font-size:12px;letter-spacing:.08em;opacity:.9}
        @keyframes d1338move{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
        @media (prefers-reduced-motion: reduce){
          .d07-10-08-bg{animation:none;background-position:50% 50%}
        }

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