← 動的パーツギャラリーへ戻る

パーツ番号 01-02-06 ・ CSSのみ

波打つCTAセクション

上下にSVGの波を配し、波が横方向にゆっくり流れる中央CTAセクション。柔らかい印象のサービスサイトの区切りに向いています。

autocsssvg

プレビュー

ソースコード

HTML

<div class="d01-02-06-sec">
          <svg class="d01-02-06-wave d01-02-06-top" viewBox="0 0 1200 60" preserveAspectRatio="none"><path d="M0,30 C150,60 350,0 600,30 C850,60 1050,0 1200,30 L1200,0 L0,0 Z" fill="#fff"/></svg>
          <div class="d01-02-06-inner">
            <h4 class="d01-02-06-title">今日から、はじめよう。</h4>
            <a href="#" class="d01-02-06-btn" onclick="return false">無料登録</a>
          </div>
          <svg class="d01-02-06-wave d01-02-06-bot" viewBox="0 0 1200 60" preserveAspectRatio="none"><path d="M0,30 C150,60 350,0 600,30 C850,60 1050,0 1200,30 L1200,60 L0,60 Z" fill="#fff"/></svg>
        </div>

CSS

.prev.d01-02-06{padding:0;overflow:hidden}
        .d01-02-06-sec{position:relative;width:100%;height:260px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#06b6d4,#3b82f6)}
        .d01-02-06-wave{position:absolute;left:0;width:200%;height:44px}
        .d01-02-06-top{top:0;animation:d01-02-06-slide 9s linear infinite}
        .d01-02-06-bot{bottom:0;animation:d01-02-06-slide 11s linear infinite reverse}
        @keyframes d01-02-06-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
        .d01-02-06-inner{position:relative;z-index:2;text-align:center;color:#fff}
        .d01-02-06-title{font-size:22px;font-weight:800;margin-bottom:18px;text-shadow:0 2px 8px rgba(0,0,0,.15)}
        .d01-02-06-btn{display:inline-block;padding:12px 30px;border-radius:999px;background:#fff;color:#0369a1;font-weight:700;font-size:14px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
        .d01-02-06-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.25)}

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