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

星空/きらめき背景

小さな光点がランダムに点滅する、静かなダーク背景です。WordPressの夜のイベント告知やプレミアム感のあるヒーローに最適です。

autocssdark

プレビュー

ソースコード

HTML

<span class="d07-02-08-stars"></span>
        <span class="d07-02-08-stars d07-02-08-stars2"></span>
        <span class="d07-02-08-label">背景サンプル</span>

CSS

.d07-02-08{padding:0;background:radial-gradient(circle at 50% 30%,#1a2450,#070a1c)}
        .d07-02-08-label{position:relative;z-index:2;color:#fff;font-weight:700;letter-spacing:.08em;font-size:15px}
        .d07-02-08-stars{position:absolute;inset:0;
          background-image:
            radial-gradient(1.4px 1.4px at 20% 30%,#fff,transparent),
            radial-gradient(1.2px 1.2px at 70% 20%,#fff,transparent),
            radial-gradient(1.6px 1.6px at 40% 70%,#fff,transparent),
            radial-gradient(1.2px 1.2px at 85% 60%,#fff,transparent),
            radial-gradient(1.4px 1.4px at 60% 85%,#fff,transparent),
            radial-gradient(1.2px 1.2px at 15% 80%,#fff,transparent);
          animation:d168tw 2.4s ease-in-out infinite}
        .d07-02-08-stars2{background-image:
            radial-gradient(1.2px 1.2px at 30% 15%,#cfe3ff,transparent),
            radial-gradient(1.4px 1.4px at 80% 40%,#cfe3ff,transparent),
            radial-gradient(1.2px 1.2px at 50% 50%,#cfe3ff,transparent),
            radial-gradient(1.4px 1.4px at 25% 55%,#cfe3ff,transparent),
            radial-gradient(1.2px 1.2px at 90% 80%,#cfe3ff,transparent);
          animation:d168tw 3.1s ease-in-out infinite .6s}
        @keyframes d168tw{0%,100%{opacity:.35}50%{opacity:1}}

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