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

動く斜めストライプ

斜めのストライプが一定速度で流れ続けるダイナミックな背景です。WordPressのキャンペーンバナーや注意喚起セクションのアクセントに向きます。

autocss

プレビュー

ソースコード

HTML

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

CSS

.d07-02-07{padding:0;background:#4f7cff}
        .d07-02-07-label{position:relative;z-index:2;color:#fff;font-weight:700;letter-spacing:.08em;font-size:15px}
        .d07-02-07::before{content:"";position:absolute;inset:-30%;
          background:repeating-linear-gradient(45deg,rgba(255,255,255,.14) 0 22px,transparent 22px 44px);
          animation:d167slide 3s linear infinite}
        @keyframes d167slide{0%{transform:translateX(0)}100%{transform:translateX(-62px)}}

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