パーツ番号 01-03-08 ・ CSSのみ
SNSアイコンが波打つフッター
SNSの円アイコンが順番にふわふわと上下し、波打つように動き続けます。WordPressのSNS連携フッターに遊び心を加えます。
プレビュー
ソースコード
HTML
<footer class="d01-03-08-ft">
<div class="d01-03-08-logo">Bounce Inc.</div>
<div class="d01-03-08-sns">
<a href="#" aria-label="X" style="--i:0">
<svg viewBox="0 0 24 24" width="15" height="15"><path fill="currentColor" d="M18 3h3l-7 8 8 10h-6l-5-6-5 6H1l8-9L1 3h6l4 5z"/></svg>
</a>
<a href="#" aria-label="Instagram" style="--i:1">
<svg viewBox="0 0 24 24" width="15" height="15"><path fill="currentColor" d="M12 8.5A3.5 3.5 0 1 0 15.5 12 3.5 3.5 0 0 0 12 8.5m0 5.8A2.3 2.3 0 1 1 14.3 12 2.3 2.3 0 0 1 12 14.3M16 7a.9.9 0 1 0 .9.9A.9.9 0 0 0 16 7M12 4.8c2.3 0 2.6 0 3.5.05a4.8 4.8 0 0 1 1.6.3 2.8 2.8 0 0 1 1.6 1.6 4.8 4.8 0 0 1 .3 1.6c.05.9.05 1.2.05 3.5s0 2.6-.05 3.5a4.8 4.8 0 0 1-.3 1.6 2.8 2.8 0 0 1-1.6 1.6 4.8 4.8 0 0 1-1.6.3c-.9.05-1.2.05-3.5.05s-2.6 0-3.5-.05a4.8 4.8 0 0 1-1.6-.3 2.8 2.8 0 0 1-1.6-1.6 4.8 4.8 0 0 1-.3-1.6C4.8 14.6 4.8 14.3 4.8 12s0-2.6.05-3.5a4.8 4.8 0 0 1 .3-1.6 2.8 2.8 0 0 1 1.6-1.6 4.8 4.8 0 0 1 1.6-.3C9.4 4.8 9.7 4.8 12 4.8"/></svg>
</a>
<a href="#" aria-label="Facebook" style="--i:2">
<svg viewBox="0 0 24 24" width="15" height="15"><path fill="currentColor" d="M13.5 21v-7h2.3l.4-2.7h-2.7V9.5c0-.8.2-1.3 1.4-1.3h1.4V5.8a19 19 0 0 0-2-.1c-2 0-3.4 1.2-3.4 3.5v2H8.6V14h2.3v7z"/></svg>
</a>
<a href="#" aria-label="YouTube" style="--i:3">
<svg viewBox="0 0 24 24" width="15" height="15"><path fill="currentColor" d="M21.6 8.1a2.5 2.5 0 0 0-1.7-1.8C18.3 6 12 6 12 6s-6.3 0-7.9.3A2.5 2.5 0 0 0 2.4 8.1 26 26 0 0 0 2.1 12a26 26 0 0 0 .3 3.9 2.5 2.5 0 0 0 1.7 1.8C5.7 18 12 18 12 18s6.3 0 7.9-.3a2.5 2.5 0 0 0 1.7-1.8 26 26 0 0 0 .3-3.9 26 26 0 0 0-.3-3.9M10 15V9l5 3z"/></svg>
</a>
</div>
<div class="d01-03-08-copy">© 2026 Bounce Inc.</div>
</footer>CSS
.d01-03-08-ft{background:#0f172a;color:#cbd5e1;text-align:center;padding:26px 16px;box-sizing:border-box;height:100%;display:flex;flex-direction:column;justify-content:center;gap:16px}
.d01-03-08-logo{color:#fff;font-weight:700;font-size:14px}
.d01-03-08-sns{display:flex;justify-content:center;gap:12px}
.d01-03-08-sns a{width:34px;height:34px;border-radius:50%;background:#1e293b;color:#7dd3fc;display:flex;align-items:center;justify-content:center;animation:d158wave 2.2s ease-in-out infinite;animation-delay:calc(var(--i) * .22s);transition:background .25s}
.d01-03-08-sns a:hover{background:#38bdf8;color:#0f172a}
@keyframes d158wave{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.d01-03-08-copy{color:#64748b;font-size:10px}クラス名 .d01-03-08 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。