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

暗転オーバーレイ+フェードインコピー

動く背景に暗いグラデーションを重ねてキャッチコピーを浮かび上がらせる演出。WordPressの採用サイトやブランドサイトのファーストビューに使える。

cssdark

プレビュー

ソースコード

HTML

<div class="d07-10-02-bg"></div>
        <div class="d07-10-02-shade"></div>
        <p class="d07-10-02-copy">想いを、かたちに。</p>

CSS

.d07-10-02{background:#111827}
        .d07-10-02-bg{position:absolute;inset:0;background:linear-gradient(135deg,#7c2d12,#be123c,#1e3a8a);background-size:280% 280%;animation:d1332move 16s ease-in-out infinite}
        .d07-10-02-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,.2) 60%)}
        .d07-10-02-copy{position:relative;z-index:1;margin:0;color:#fff;font-size:22px;font-weight:800;letter-spacing:.04em;text-shadow:0 3px 14px rgba(0,0,0,.5);animation:d1332fade 4s ease-in-out infinite}
        @keyframes d1332move{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}
        @keyframes d1332fade{0%,100%{opacity:0;transform:translateY(10px)}20%,80%{opacity:1;transform:translateY(0)}}
        @media (prefers-reduced-motion: reduce){
          .d07-10-02-bg{animation:none;background-position:50% 50%}
          .d07-10-02-copy{animation:none;opacity:1;transform:none}
        }

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