以前、コメントで少なくとも5人が、次のgifのように、記事内でホバーをリンクすると波状の下線アニメーションがどのように実現されるかを尋ねました。
これを実現する方法は次のとおりです。
2つの実装方法があり、それぞれに長所と短所があります。
1.純粋なCSSを使用して放射状グラデーションを実現します
放射状のグラデーションを使用して波線効果を描画します。波線ループセグメントは、上向きの半円弧と下向きの半円弧の組み合わせです。
したがって、半径方向のグラデーションを使用して円弧を描くだけbackground-positionで、2つの円弧の位置を制御し、前後にそれらをつなぎ合わせることで、波線効果を実現できます。
関連するCSSコードは次のとおりです。
.flow-wave {
背景：radial-gradient（circle at 10px -7px、transparent 8px、currentColor 8px、currentColor 9px、transparent 9px）repeat-x、
radial-gradient（circle at 10px 27px、transparent 8px、currentColor 8px、currentColor 9px 、透明9px）繰り返し-x;
背景サイズ：20px 20px;
背景位置：-10px calc（100％+ 16px）、0 calc（100％-4px）;
}
リアルタイムの効果は次のとおりです。
静的な波線効果を使用すると、残りはこの波線が移動するようになり、CSS3animationアニメーションを使用してbackground-position位置を制御できます 。
.flow-wave {
アニメーション：waveFlow1s無限線形;
}
@keyframes waveFlow {
from {background-position-x：-10px、0; }
から{background-position-x：-30px、-20px; }
}
これで波のアニメーション効果が実現します。
ここをクリックしてください：CSS放射状グラデーションシミュレーション波線デモ
この方法の利点は、カラーコントロールが非常に便利なことです。たとえば、テキストの色を緑を許すように変更すると、湾曲した水の波の色も緑を許すようになります。
この方法の欠点は、理解のコストが少し高いことです。CSSを使用してradial-gradient波線効果をシミュレートする方法に は、かなりのCSSスキルの蓄積が必要です。開始するのは簡単ではなく、必要に応じて維持するのも簡単ではありません。将来的にサイズを変更します。同時に、通常の画面密度の画面を備えたChromeブラウザでは、線が滑らかではないため、欠陥のある設計者には受け入れられない可能性があります。
この時点で、理解しやすい次の方法を試すことができます。
2.背景としてSVG波形ベクトル図を使用します
つまり、CSSを自分で手動で描画するのではなく、SVG波形ベクトル図を背景として直接使用するため、コードの量が同じで、理解しやすくなります。CSSコードのヒント：
.svg-wave {
background：url（ "data：image / svg + xml、％3Csvg xmlns = 'http：//www.w3.org/2000/svg' viewBox = '0 0 20 4'％3E％3Cpath fill = 'なし'ストローク= '％23333' d = 'M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3' /％3E％3C / svg％3E "）繰り返し- x 0 100％;
背景サイズ：20px自動;
}
リアルタイムの効果は次のとおりです。
静的な波線効果を使用すると、残りはこの波線が移動するようになり、CSS3animationアニメーションを使用してbackground-position位置を制御できます 。
.svg-wave {
アニメーション：waveMove1s無限線形;
}
@keyframes waveMove {
from {background-position：0 100％; }
から{background-position：-20px 100％; }
}
この方法は、私のブログリンクで使用されている方法です。
利点は、線のエッジが滑らかで、効果が繊細で、理解しやすく、使いやすく、保守しやすいことです。
不利な点も明らかです。つまり、波線の色がテキストの色とリアルタイムで変化しないため、テキストの色が変化しないシーンに適しています。
我々は波線の色を変更したい場合にも非常に簡単ですが、変更のこの部分backgroundのコードをstroke='%23333'、'%23'それがある#ので、stroke='%23333'実際にはstroke='#333'手段。たとえば、赤と少しオレンジに変更する必要があり、stroke='%23F30'完全に書き込むことができますstroke='%23FF3300'。
この色は、以下に示すように、私のブログリンクの波線の色です。
実際の開発シナリオに応じて、適切な方法を選択できます。
3.それが終わりに近づいているときはいつでも
text-decorationプロパティはすでにチルダアンダースコアをサポートしています：
テキスト装飾スタイル：波状;
効果は次のとおりです。
線が太くて一貫性がなく、文字と装飾線が重なると、装飾線が直接消えて波線が断面になり、text-decoration-skip追加の制御が必要になることがわかります。したがって、実際の開発では、実際のプロジェクトで使用することはお勧めしません。
2020-03-21の更新
text-decorationプロパティによって実際のプロジェクトで使用できる波線を実現することも可能です。この記事を参照してください：「CSSテキスト装飾は100％幅の波線効果を実現します」。
波線の幅はブラウザによって異なるため、波線の各繰り返しセグメントの幅を予測することはできず、理論的には無限の動きが必要になることはありません。
そのため、テキストやグラフィックスの波線アニメーション効果は使用できませんtext-decoration。
PS：テキストデコレーションは波線だけでなく点線なども追加します。興味のある方は、先ほど書いた「CSS3テキストデコレーションの波線などの新機能を理解する」の記事を参照してください。
最後に、詩を書きます。
それが終わりに近づいているときはいつでも、
私はいつも何かについて話したいです。
中毒はどこから来るのですか？
遠くに島があります。