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アドレスの範囲を設定します

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

推薦する

フォーム送信の更新ページはソースコード設計にジャンプしません

1. ソースコードの設計コードをコピーコードは次のとおりです。 <!DOCTYPE html ...

mysql インストーラ コミュニティ 8.0.16.0 のインストールと構成のグラフィック チュートリアル

mysqlインストーラコミュニティ8.0.16.0インストールグラフィックチュートリアル、参考までに...

マインスイーパゲームを実装するための jQuery プラグイン (2)

この記事では、jQueryプラグインを使用してマインスイーパゲームを実装する2番目の記事を参考までに...

フェッチネットワークリクエストのカプセル化例の詳細な説明

エクスポートデフォルト({ URL、 メソッド = 'GET'、 データ = nu...

MySQL システム ユーザーが開くことができるファイルの最大数に関する簡単な説明

本から学ぶことは常に浅はかで、これがさらなるダウンタイムを引き起こすことには決して気づきません......

Office ファイルのオンライン プレビュー用の Vue サンプル コード

最近、電子アーカイブに取り組んでおり、バックエンドではファイルの Huawei Cloud OSS ...

div間のギャップの解決策

HTMLのdivブロックを使用していて、ブロックの中央をしっかりと接続できず、解決できない場合1. ...

ネイティブJSは非常に見栄えの良いカウンターを実装します

今日は、ネイティブ JS で実装された見栄えの良いカウンターを紹介します。効果は次のとおりです。 以...

Vue el-date-picker 動的制限時間範囲ケースの詳細な説明

2つの状況がある1. 開始時間と終了時間が同じボックス内にあります(今月のみ限定) 2. 開始時間と...

ソースコード分析からTomcatがサーブレットの初期化を呼び出す方法の詳細な説明

目次導入1. Tomcatを起動するコード2. Tomcatフレームワーク3. コンテナを作成する ...

CSS フロントエンドの知識ポイントのまとめ(必読)

1. CSS の概念: (カスケーディング スタイル シート)利点: 1. コンテンツとプレゼンテ...

node.js で EventEmitter をカスタマイズする方法

目次序文1. 何ですか2. Node.jsでEventEmitterを使用する方法3. 実施プロセス...

aタグ疑似クラスの機能と記述順序は何ですか?

a タグ疑似クラスの役割: 「:link」: 訪問されていないタグの状態。 「:visited」: ...

テーブルを動的に読み込み、削除する JavaScript

この記事では、テーブルを動的に読み込み、削除するためのJavaScriptの具体的なコードを参考まで...

JavaScript でよく使われる 5 つのオブジェクト

目次1. JavaScript オブジェクト1).配列オブジェクト2).ブールオブジェクト3).日付...