波打つテキストのCSSジェネレーター
文字列を1文字ずつ分割し、上下にゆらゆらと波打たせるアニメーションを生成します。
プレビュー
<div class="wavy-container">
{{generated_html}}
</div>.wavy-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 1.5px; /* 文字間隔の調整 */
}
.wavy-container span {
position: relative;
display: inline-block;
background: {{text_color}};
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: {{font_size}}px;
font-weight: 800;
text-transform: uppercase;
animation: wavy-anim {{duration}}s infinite ease-in-out;
animation-delay: calc({{delay}}s * var(--i));
}
@keyframes wavy-anim {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-{{wave_height}}px);
}
}機能、使い方
- 動的なタイポグラフィ: 入力された文字列を 1 文字ずつ
spanタグに分解し、CSS のanimation-delayとcalc()関数を組み合わせて波のようなリズムを生み出します。 - フルカスタマイズ: 波が跳ねる高さ、周期（速度）、そして文字ごとの時間のズレ（ディレイ）を自由に調整できます。
- CSS変数の活用: 各
spanに付与された独自の--i変数を CSS 側で利用することで、HTML の構造を汚さずにディレイ管理を行っています。
デザインのポイント
太めのフォント（例：Impact や太字の Sans-serif）を指定すると、より波打つ形が強調され、キャッチーな印象になります。また、文字ごとに異なる色を手動で割り当てるなどの応用も可能です。
