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

動く背景+半透明フローティングカード

動く背景の上をゆっくり上下しながら浮かぶ半透明カード。WordPressのお知らせバナーやキャンペーン訴求カードを重ねたい場合に使える。

css

プレビュー

ソースコード

HTML

<div class="d07-10-10-bg"></div>
        <div class="d07-10-10-card">
          <strong>Live Now</strong>
          <span>動く背景の上に浮かぶガラス風カード</span>
        </div>

CSS

.d07-10-10{background:#0f172a}
        .d07-10-10-bg{position:absolute;inset:0;background:linear-gradient(120deg,#0f172a,#0ea5e9,#134e4a,#0f172a);background-size:300% 300%;animation:d1340move 16s ease-in-out infinite}
        .d07-10-10-card{position:relative;z-index:1;width:190px;padding:16px;border-radius:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px);color:#fff;display:flex;flex-direction:column;gap:4px;box-shadow:0 12px 30px rgba(0,0,0,.25);animation:d1340float 5s ease-in-out infinite}
        .d07-10-10-card strong{font-size:14px}
        .d07-10-10-card span{font-size:11px;opacity:.85}
        @keyframes d1340move{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
        @keyframes d1340float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
        @media (prefers-reduced-motion: reduce){
          .d07-10-10-bg{animation:none;background-position:50% 50%}
          .d07-10-10-card{animation:none}
        }

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