CSS変数を使用して、クールで素晴らしいフローティング効果を実現します。

最近、Grover の Web サイトで楽しいホバー アニメーションを見つけ、自分自身のインスピレーションを得ました。このアニメーションは、サブスクリプション ボタンの上にマウスを移動すると、対応する色のグラデーションが表示されるというものです。このアイデアはシンプルですが、ボタンが目立つようになり、人々はすぐに気づき、クリックする可能性が高まります。

この効果を実現し、Web サイトを目立たせるにはどうすればよいでしょうか?実は、思ったほど難しくはありません！

位置追跡

最初に行う必要があるのは、マウスの位置を取得することです。

document.querySelector('.button').onmousemove = (e) => {
  定数 x = e.pageX - e.target.offsetLeft
  定数 y = e.pageY - e.target.offsetTop

  e.target.style.setProperty('--x', `${x}px`) を使います。
  e.target.style.setProperty('--y', `${y}px`) を設定します。

}

1. 要素を選択し、ユーザーがマウスをその上に移動するまで待ちます。
2. 要素に対する相対的な位置を計算します。
3. 座標を CSS 変数に保存します。

はい、わずか 9 行のコードで、ユーザーがマウス カーソルを置いた場所に関する情報を取得できます。この情報を使用して驚くべき結果を得ることができますが、まずは CSS コードを完成させましょう。

アニメーショングラデーション

まず、いつでも使用できるように座標を CSS 変数に保存します。

。ボタン {
  位置: 相対的;
  外観: なし;
  背景: #f72359;
  パディング: 1em 2em;
  境界線: なし;
  色: 白;
  フォントサイズ: 1.2em;
  カーソル: ポインタ;
  アウトライン: なし;
  オーバーフロー: 非表示;
  境界線の半径: 100px;

  スパン {
    位置: 相対的;
  }

  ＆：：前に {
    --サイズ: 0;  

    コンテンツ： '';
    位置: 絶対;
    左: var(--x);
    上: var(--y);
    幅: var(--size);
    高さ: var(--size);
    背景: 放射状グラデーション(円の最も近い側、#4405f7、透明);
    変換: translate(-50%, -50%);
    トランジション: 幅 .2 秒のイーズ、高さ .2 秒のイーズ。
  }

  &:hover::before {
    --サイズ: 400px;
  }
}

1. ボタンの上にテキストが表示されないようにするには、テキストを span で囲みます。
2. 幅と高さを 0px に初期化し、ユーザーがボタンの上にマウスを置いたときに 400px に変更します。このトランジションを風のように瞬時に表示されるように設定することを忘れないでください :dash:;
3. 座標を使用してマウスの位置を追跡します。
4. 最も近い側の円を使用して、背景プロパティに放射状グラデーションを適用します。最も近い側は表面全体をカバーできます。

要約する

上記は、CSS 変数を使用してクールで素晴らしいフローティング効果を実現する方法について紹介したものです。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!