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

波紋リップル背景

中心から同心円の波紋が広がり続ける穏やかな背景です。WordPressのお知らせや音・水をテーマにしたコンテンツの背景に馴染みます。

css

プレビュー

ソースコード

HTML

<span class="d07-02-09-r"></span>
        <span class="d07-02-09-r d07-02-09-r2"></span>
        <span class="d07-02-09-r d07-02-09-r3"></span>
        <span class="d07-02-09-label">背景サンプル</span>

CSS

.d07-02-09{padding:0;background:radial-gradient(circle,#0f5a6b,#062a34)}
        .d07-02-09-label{position:relative;z-index:2;color:#fff;font-weight:700;letter-spacing:.08em;font-size:15px}
        .d07-02-09-r{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;
          border:2px solid rgba(120,230,255,.6);border-radius:50%;
          animation:d169ripple 3.6s ease-out infinite}
        .d07-02-09-r2{animation-delay:1.2s}
        .d07-02-09-r3{animation-delay:2.4s}
        @keyframes d169ripple{0%{transform:scale(.2);opacity:.9}100%{transform:scale(7);opacity:0}}

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