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

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 ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  Dockerはブリッジを追加し、IPアドレスの範囲を設定します

>>:  ウェブページコンテンツの閲覧設計手法に関する議論

推薦する

Linux で固定 IP を設定する方法 (テスト済みで効果的)

まず、仮想マシンを開きます xshell5 を開いて仮想マシンに接続します (より便利です。Linu...

この記事では、CSSのようなJSモジュールをインポートする方法を説明します。

目次序文構築可能なスタイルシートとは何ですか? CSSモジュールスクリプトの使用インポートアサーショ...

キーボード上の各種特殊記号の英語読み方(知識の普及)

キーボード文字英語`バッククォート〜チルダ!叫ぶ@で#ナンバーサイン$ドル%パーセント^キャレット&...

数十行のjsを使用してクールなキャンバスインタラクティブ効果を実現する方法を教えます

目次1. 円を描く2. マウスで動かした円3. マウスでドラッグした粒子4. カラーグラデーション粒...

CSS の無効な行の高さ設定の問題の解決策

CSS の無効な行の高さ設定についてまず、次のコード文字列を記述します。 <!DOCTYPE ...

MySQL 5.7.22 バイナリパッケージのインストールとインストール不要版 Windows 設定方法

次のコードは、MySQL 5.7.22 バイナリ パッケージのインストール方法を紹介しています。具体...

MySQLの主キーとユニークキーの重複挿入の解決策の詳細な説明

目次解決: 1. 無視する2. 交換する3. 重複キーの更新についてデータを挿入するときに、重複した...

JavaScript の基本演算子

目次1. オペレーター要約する1. オペレーター演算子は、代入、比較、算術演算などの機能を実装するた...

MySQLでクエリキャッシュを実行する方法と失敗を解決する方法

関数を使用する前にパラメータのプロパティを理解して、関数の使い方をより深く理解する必要があることは誰...

mysqlは複数の主キーを設定する操作を実装します

ユーザーテーブル、ID番号は一意である必要があります、携帯電話番号、電子メールアドレスは一意である必...

CSS3 フィルター属性の使い方の紹介

1. はじめにフロントエンドページのアニメーション効果を記述する場合、filter 属性は多かれ少な...

過去2年間のユーザーエクスペリエンス

<br />国内のウェブサイトが本格的に普及し、ユーザーエクスペリエンスに重点が置かれる...

W3C チュートリアル (2): W3C プログラム

W3C 標準化プロセスは 7 つの異なるステップに分かれています。 W3C 標準化プロセスは 7 つ...

Dockerイメージを素早くデプロイして実行する最新のIDEAプロセスの詳細な説明

背景docker とアイデアを使用して、Java Web の開発、展開、運用までのプロセス全体を実現...

MySQL 5.7.27 winx64 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 5.7.27 winx64のインストールと設定方法を参考までに紹介します。...