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

パララックス風レイヤー背景+固定テキスト

速度の異なる複数のグラデーション帯が奥行きを演出し、中央のテキストは固定されたまま動く。WordPressのブランドサイトやポートフォリオのイントロ演出に使える。

css3d

プレビュー

ソースコード

HTML

<div class="d07-10-07-layer d07-10-07-l1"></div>
        <div class="d07-10-07-layer d07-10-07-l2"></div>
        <div class="d07-10-07-layer d07-10-07-l3"></div>
        <div class="d07-10-07-content">DEEP FIELD</div>

CSS

.d07-10-07{background:#0f172a}
        .d07-10-07-layer{position:absolute;inset:-10% -40%;opacity:.55}
        .d07-10-07-l1{background:repeating-linear-gradient(100deg,#6366f1 0 40px,transparent 40px 80px);animation:d1337shift 9s linear infinite}
        .d07-10-07-l2{background:repeating-linear-gradient(100deg,#22d3ee 0 60px,transparent 60px 120px);opacity:.35;animation:d1337shift 15s linear infinite reverse}
        .d07-10-07-l3{background:radial-gradient(circle at 30% 30%,rgba(236,72,153,.35),transparent 60%);animation:d1337pulse 8s ease-in-out infinite}
        .d07-10-07-content{position:relative;z-index:1;color:#fff;font-size:20px;font-weight:800;letter-spacing:.12em;text-shadow:0 3px 14px rgba(0,0,0,.5)}
        @keyframes d1337shift{0%{transform:translateX(0)}100%{transform:translateX(-15%)}}
        @keyframes d1337pulse{0%,100%{opacity:.3}50%{opacity:.6}}
        @media (prefers-reduced-motion: reduce){
          .d07-10-07-layer{animation:none}
        }

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