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

サイト構築 -CSS

Post on:2026年2月17日

sponsorsr

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

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

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

See the Pen 伸び縮みするホバーエフェクト(Chromeのみ) by coliss (@coliss)
on CodePen.

続いてこちらのデモは、上下の方向を認識する弾けるホバーエフェクト。

See the Pen 伸び縮みするホバーエフェクト: 方向認識(Chromeのみ) by coliss (@coliss)
on CodePen.

HTMLは、下記の通り。
テキストを二重に記述することは必要ないですが、文字ごとにspanによるラッパーが必要です。

<ul>
  <li>
    <a href="#"><span>A</span><span>b</span><span>o</span><span>u</span><span>t</span></a>
  </li>
</ul>

<ul>

<li>

<a href="#">About</a>

</li>

</ul>

CSSは、下記の通り。
shape(), sibling-index()/sibling-count(), linear()など、モダンCSSの機能を組み合わせることで、ホバー時に気持ちいい伸縮効果を与えることができます。

@property --_s {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}
ul li a {
  --h: .12em; /* control the elastic effect */
  --g: .15ch; /* the gap between letters */
  
  display: flex;
  gap: var(--g);
  font: bold 40px monospace;
  transition: --_s 1.5s linear(/* see the demo for the full code */);
}
ul li a:hover {
  --_s: 1;
  transition: --_s .3s;
}
ul li a span {
  offset: shape(from .5ch, 
      curve to calc((sibling-count() - 1)*(1ch + var(--g)) + .5ch) 50%
            with 30% calc(50% - var(--_s)*sibling-count()*var(--h))/
                 70% calc(50% - var(--_s)*sibling-count()*var(--h))
    ) calc(99.9%*(sibling-index() - 1)/(sibling-count() - 1));
}

@property --_s {

syntax: "<number>";

initial-value: 0;

inherits: true;

}

ul li a {

--h: .12em; /* control the elastic effect */

--g: .15ch; /* the gap between letters */

display: flex;

gap: var(--g);

font: bold 40px monospace;

transition: --_s 1.5s linear(/* see the demo for the full code */);

}

ul li a:hover {

--_s: 1;

transition: --_s .3s;

}

ul li a span {

offset: shape(from .5ch,

curve to calc((sibling-count() - 1)*(1ch + var(--g)) + .5ch) 50%

with 30% calc(50% - var(--_s)*sibling-count()*var(--h))/

70% calc(50% - var(--_s)*sibling-count()*var(--h))

) calc(99.9%*(sibling-index() - 1)/(sibling-count() - 1));

}

元ネタは下記ポストより

A CSS-only elastic hover effect, because why not?https://t.co/HBVJyGbRv2

A chrome-only experiment using shape(), sibling-index(), linear(), etc. pic.twitter.com/L0snKc5H3o

— CSS by T. Afif (@ChallengesCss) February 3, 2026