パーツ番号 01-02-06 ・ CSSのみ
波打つCTAセクション
上下にSVGの波を配し、波が横方向にゆっくり流れる中央CTAセクション。柔らかい印象のサービスサイトの区切りに向いています。
プレビュー
ソースコード
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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。