パーツ番号 02-01-30 ・ CSSのみ

パーティクル浮遊見出し

見出しの周囲を光の粒子が絶えず揺らめきながら浮遊し続ける演出。イベント告知やナイトラウンジ、コスメブランドなど幻想的な世界観のヒーロー見出しに。

css

プレビュー

ソースコード

HTML

<div class="d02-01-30-stage">
          <span class="d02-01-30-p" style="--x:-70px; --y:-40px; --d:0s;"></span>
          <span class="d02-01-30-p" style="--x:80px; --y:-55px; --d:.6s;"></span>
          <span class="d02-01-30-p" style="--x:-90px; --y:30px; --d:1.2s;"></span>
          <span class="d02-01-30-p" style="--x:95px; --y:45px; --d:1.8s;"></span>
          <span class="d02-01-30-p" style="--x:0px; --y:-65px; --d:2.4s;"></span>
          <span class="d02-01-30-p" style="--x:-40px; --y:60px; --d:3s;"></span>
          <h4 class="d02-01-30-h">静寂に浮かぶ、光。</h4>
        </div>

CSS

.prev.d02-01-30{ background:#0b0f1f; }
        .d02-01-30 .d02-01-30-stage{
          position:relative;
          display:flex;
          align-items:center;
          justify-content:center;
          height:160px;
        }
        .d02-01-30 .d02-01-30-h{
          position:relative;
          z-index:1;
          font-size:26px;
          font-weight:800;
          letter-spacing:.06em;
          color:#f8fafc;
        }
        .d02-01-30 .d02-01-30-p{
          position:absolute;
          left:calc(50% + var(--x));
          top:calc(50% + var(--y));
          width:4px; height:4px;
          border-radius:50%;
          background:#93c5fd;
          box-shadow:0 0 8px 2px rgba(147,197,253,.9);
          animation:d02-01-30-float 4.5s ease-in-out infinite;
          animation-delay:var(--d);
        }
        @keyframes d02-01-30-float{
          0%,100%{ transform:translate(0,0); opacity:.3; }
          50%{ transform:translate(6px,-10px); opacity:1; }
        }

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