背景パターンスローシフト
斜めのストライプ柄がゆっくり横へ流れ続ける、CSS だけの装飾背景です。柄は repeating-linear-gradient(45deg,...) で描き、 @keyframes で background-position を 60px ずらすことでループ。
解説
斜めのストライプ柄がゆっくり横へ流れ続ける、CSS だけの装飾背景です。柄は repeating-linear-gradient(45deg,...) で描き、@keyframes で background-position を 60px ずらすことでループ。animation:bpsSlide 4s linear infinite と等速指定なので継ぎ目なく永遠に流れ続けます。画像を一切使わずグラデーションの繰り返しだけで成立するため、ファイルサイズはゼロに近く、拡大してもぼやけません。
使う場面
- フッター手前や CTA セクションのちょっとした地の装飾
- ロゴや見出しを乗せるブランドのキービジュアル帯
- イベント告知バナーの背景
柄の太さや角度は repeating-linear-gradient の 10px20px や 45deg の値で調整でき、2 色（#667eea と #f093fb）を変えれば配色も自在です。流れる速さは 4s を増やすほど穏やかになります。常に動き続ける背景は目が疲れやすいので、文字を乗せる帯だけに限定したり、prefers-reduced-motion に配慮してアニメを止める指定を足すと親切です。
使用例・適したシーン
- ヒーロー背景
- セクション区切り
- フッター前装飾
よくある質問
JavaScript は必要ですか?
不要です。背景パターンの描画もスライド animation もすべて CSS で完結しているため、HTML と CSS を貼るだけで動きます。
ドット柄や別の模様にもできますか?
できます。repeating-linear-gradient を repeating-radial-gradient に変えればドットやリング状の柄になり、同じ background-position のアニメで流せます。