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

ドットグリッド(点描)背景

細かなドットのパターンがゆっくりスクロールし続ける点描背景です。WordPressのセクション区切りや資料風レイアウトの背景に相性が良いです。

scrollcss

プレビュー

ソースコード

HTML

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

CSS

.d07-02-04{padding:0;background:#101826}
        .d07-02-04-label{position:relative;z-index:2;color:#fff;font-weight:700;letter-spacing:.08em;font-size:15px}
        .d07-02-04::before{content:"";position:absolute;inset:-40px;
          background-image:radial-gradient(rgba(120,170,255,.55) 1.6px,transparent 1.7px);
          background-size:22px 22px;animation:d164scroll 6s linear infinite}
        @keyframes d164scroll{0%{transform:translate(0,0)}100%{transform:translate(22px,22px)}}

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