2026年02月17日(火)

このホバーエフェクト、楽しい！ CSSのみで実装する、弓の弦のように弾けるホバーエフェクト（方向も認識）

• 0
• 2
• 5
• 0

カーソルで下からホバーすると弓の弦のように上から弾け、上からホバーすると下から弾ける、操作するのが楽しくなるホバーエフェクトを紹介します。

弓の弦のように弾けるホバーエフェクトはモダンCSSの機能（shape(), sibling-index()/sibling-count(), linear()など）で実現されており、コピペで簡単に実装できます。

実際の動作は、デモページをご覧ください。
まずは一方向のみに対応した弾けるホバーエフェクト、対応ブラウザはChrome, Edgeのみです。