リンクホバーエフェクトを楽しんで

私が働いているデザイナーは、最近のチームミーティングでコンプを提示していました。 彼女は、コンポーネントからパターン、そしてその間のすべてがフロントエンド開発者を幸せにするような、設計システムのコンセプトをつなぎ合わせる素晴しかし、私の目を引いた彼女の仕事には小さな小さな細部がありました。P>

ハァッ！ 私は前にそれを見ていなかっただけでなく、アイデアも私の心を越えていませんでした。 ライブサイトにはたくさんのインスタンスがありますが、そのうちの1つは概要です。 それは設計に影響を与えた実装だったものでした。クール、私は考え出した。

クールな、私は考えました。

線形の背景勾配や背景画像のようなものを行うことができます。 しかし！ それはデザインの終わりではありませんでした。 それは同様にアニメーション化されていることが判明しました。 ここでも、アウトラインから：

おっと！ それはかなり野生です。 私の最初のアイデアのいずれかをアニメーション化することは、特にクロスブラウザサポートのために、困難であろうので、私は正直なところ、それに

だから、アウトラインはどのようにそれをしましたか？ 結局のところ、それはSVGです。 私たちは波線のパスを作り、それをかなり簡単にアニメーション化することができます：

CodepenのGeoff Graham（@geoffgraham）によるペンの波線を参照してくださしかし、それはリンクでどのように機能しますか？

さて、私たちはSVGを使用することができますbackground-imageプロパティ：

CodepenのGeoff Graham（@geoffgraham）によるペンの波線を参照してください。しかし、それは実際にそれをアニメーション化することができないので、ちょっと安っぽいです。

そのためにはより良い価値が必要です。 ただし、background-imageプロパティでSVGに直接CSSをインライン化できます。 単純にSVGコードをコピーしてプロパティに貼り付けることはできませんが、適切なエンコーディングを使用できます。

CodepenのGeoff Graham(@geoffgraham)によるペンの波線を参照してください。また、SVGはマークアップ内に独自のスタイルを含めることができるため、アニメーションはbackground-imageプロパティですぐに投げることができます。

コードペンのGeoff Graham（@geoffgraham）によるペンの波線を参照してください。

必要に応じて、少し違ったスタイルにすることができます。

CodepenのGeoff Graham（@geoffgraham）によるペンリンクEffectz–Squiggleを参照してくださ

これは感動的です！私はアニメーション波線が良いユーザーエクスペリエンスのために作るかどうかはわかりませんし、率直に言って、それはこの投稿のポイントではあり 要点は、アウトラインが滑らかなCSS実装で楽しいアイデアを持っていたことです。それは私たちがリンクで行うことができる他の非標準的な（おそらく型破りな）ホバースタイリングについて考えさせました。

再び、使いやすさを脇に投げ、CSSで壮大なol’時間を持っている…

背景効果への境界線

多分デフォルトのリンク上の同じ下の境界線が成長し、ホバ:

CodePenのGeoff Graham（@geoffgraham）によるホバーのペンリンクEffectz–Backgroundを参照してください。コードペンのGeoff Graham（@geoffgraham）によるペンリンクEffectz–Horizotonal背景を参照してください。

コードペンのリンクEffectz-Horizotonal背景を参照してくださ

アウトライン化されたテキストエフェクト

フォントの色を取り除き、アウトラインを残してみましょう。

CodePenのGeoff Graham（@geoffgraham）によるホバーのペンリンクEffectz–Outlineを参照してください。別のアイデアは、ホバー時にページの外に成長するかのようにテキストを上げることです。

CodepenのGeoff Graham（@geoffgraham）によるpen Link Effectz–Raised text on hoverを参照してくださ

フォントスワッパー-oo効果

これは私を笑わせるほど実用的ではありませんが、なぜそうではありません：

CodepenのGeoff Graham（@geoffgraham）によるホバー上のPen Link Effectz–Swap font on Hoverを参照してください。

“Turn it Up,Chris”効果

申し訳ありません、Chris。 あなたはそれを愛する知っています。 ❤ ️

ペンリンクEffectzを参照してください-クリス、それを回してください！ Geoff Graham(@geoffgraham)によってCodePenにあります。あなたは何を思い付くことができますか？