純粋な CSS を使用してマウス追従効果を実装するにはどうすればよいですか? (詳しいコード説明)

マウスフォローとは、その名前が示すように、要素がマウスの動きに従い、対応する動きをすることを意味します。一般に、CSS はプレゼンテーションを担当し、JavaScript は動作を担当します。マウスのフォローの効果は動作であり、通常、それを実現するには JS の助けが必要です。

もちろん、この記事の焦点は、CSS を使用して、JS に頼らずにマウス追従動作アニメーション効果をシミュレートする方法を紹介することです。

まず、マウスフォロー効果がどのようなものかを見てみましょう:

原理

上記のデモを例に挙げると、CSS を使用してマウス追従を実装する場合、最も重要な点は次のとおりです。

現在のマウスの位置をリアルタイムで監視する方法。

OK、実際、多くの CSS 効果は「目障り」という言葉から切り離せません。現在のマウスがどこにあるかを監視するには、要素でページをカバーするだけです:

ページ全体をカバーするのに 100 個の要素を使用します。ホバーリングすると、色が表示されます。コア SCSS コードは次のとおりです。

<div class="g-container">
  <div class="position"></div>
  <div class="position"></div>
  <div class="position"></div>
  <div class="position"></div>
  ... // 100个
</div>

.g-container {
    position: relative;
    width: 100vw;
    height: 100vh;
}
 
.position {
    position: absolute;
    width: 10vw;
    height: 10vh;
}
 
@for $i from 0 through 100 {
     
    $x: $i % 10;
    $y: ($i - $x) / 10;
     
    .position:nth-child(#{$i + 1}) {
        top: #{$y * 10}vh;
        left: #{$x * 10}vw;
    }
 
    .position:nth-child(#{$i + 1}):hover {
        background: rgba(255, 155, 10, .5)
    }
}

この効果を得ることができます:

さて、各要素のホバー効果を削除すると、この時点の操作ページは実際には次のようになります。効果はありません。しかし同時に、:hover 疑似クラスを通じて、現在のマウスがページ上のどの範囲にあるかを大まかに知ることができます。

わかりました、続けましょう。別の要素 (丸いボール) をページに追加して、ページの中央に絶対配置しましょう:

<div class="g-ball"></div>

.ball {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10vmax;
    height: 10vmax;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

最後に、~# を使用します。 ## Brothers 要素セレクターは、hover ページ (実際には 100 個の非表示 div をホバーしている) 上で、現在ホバーされている div を通じてボール要素の位置を制御します。

@for $i from 0 through 100{
     
    $x: $i % 10;
    $y: ($i - $x) / 10;
     
    .position:nth-child(#{$i + 1}):hover ~ .ball {
        top: #{$y * 10}vh;
        left: #{$x * 10}vw;
    }
}

CodePen デモ -- マウスフォローを実装するための CSS

既存の問題

精度が低すぎるなど、まだ多くの欠陥があります。

動きが十分に滑らかではありません

乾いてください

CSS マウスフォローボタン効果

CodePen デモ -- ねばねばマウス フォロー

• ただし、上で紹介した方法を使用してマウスのフォローを実装することもできます。

• CSS フィルター filter: Blur()contrast() を使用してシミュレートします。 elements Fusion について詳しくは、この記事をご覧ください:

  CSS フィルターのスキルとあなたが知らない詳細

Demo poke me、CodePen Demo -- CSS マウスフォローボタン効果

アニメーションに続く全画面マウス

複数の要素を制御する場合。複数の要素間のアニメーション効果には、シーケンスの動きを遅らせるために、異なる遷移遅延が設定されます。うわー、考えただけでもワクワクしますね。例:

CodePen デモ -- マウス フォロー アニメーション PURE CSS MAGIC MIX

もっと想像力を働かせることができれば、あなたはより多くの火花と衝突する可能性があります:

このエフェクトは、私がとても気に入っている日本の CodePen 作者である中谷祐介氏の作品です。ソース コード: Demo - - Only CSS: 水面

マウスの指示に従ってください

もちろん、要素の移動を示す必要はありません。 div を使用してページをカバーし、要素の現在位置をキャプチャする手法は、マウスの移動軌跡を示すなど、他の効果にも使用できます:

1。デフォルトの完全な背景 div の transition-duration: 0.5s

2. 要素の背景 div にホバーするとき、現在ホバーしている div の transition-duration を変更します。は: 0s で、ホバリング時に背景色を指定して、現在ホバリングされている div がすぐに表示されるようにします (

3)。マウスが div から離れると、transition-duration ##transition-duration: 0.5s であるデフォルトの状態に div が戻り、同時に背景色が消え、左側の div の背景色がゆっくりと透明に移行します。 、ゴースト効果を引き起こす

CodePen デモ -- トランジションをキャンセル

#実際には、興味深い使い方がたくさんあります。興味のある学生は自分でやってみて、さらに試してみたり、組み合わせたりすることができます。

人々からよく質問されますが、これらの奇妙な用法は実際のビジネスで使用できますか?役に立つかどうか？そうですね、私の意見としては、おそらく実際にはビジネスで使用されていないか、応用シナリオが非常に限られているのかもしれませんが、それについて詳しく知ることで、問題に遭遇したときにより多くの選択肢が得られ、より多くの思考の余地が得られ、少なくともより良い発散的思考が可能になるのではないかと考えています。無害です。

あなたが思いつきもしなかったもっと興味深い CSS をここに来て見てみることができます:

わかりました、この記事はここで終わります。お役に立てば幸いです:)

さらにクールな CSS3、html5、JavaScript、jQuery 特殊効果コードがすべて含まれています:

以上が純粋な CSS を使用してマウス追従効果を実装するにはどうすればよいですか? (詳しいコード説明)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。