CSS實(shí)現(xiàn)鼠標(biāo)跟隨效果

本篇文章給大家分享的是有關(guān)CSS實(shí)現(xiàn)鼠標(biāo)跟隨效果，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

我們先來看看鼠標(biāo)跟隨效果是什么樣的：

原理

以上面的 Demo 為例子，要使用 CSS 實(shí)現(xiàn)鼠標(biāo)跟隨，最重要的一點(diǎn)就是：

如何實(shí)時監(jiān)測到當(dāng)前鼠標(biāo)處于何處？

OK，其實(shí)很多 CSS 效果，都離不開 障眼法 二字。要監(jiān)測到當(dāng)前鼠標(biāo)處于何處，我們只需要在頁面上鋪滿元素即可：

我們使用 100 個元素，將整個頁面鋪滿，hover 的時，展示顏色，核心 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 效果去掉，那么這個時候操作頁面，其實(shí)是沒有任何效果的。但同時，通過 :hover 偽類，我們又是可以大概得知當(dāng)前鼠標(biāo)是處于頁面上哪個區(qū)間的。

好繼續(xù)，我們再給頁面添加一個元素（圓形小球），將它絕對定位到頁面中間：

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

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

最后，我們借助 ~ 兄弟元素選擇器，在 hover 頁面的時候（其實(shí)是 hover 一百個隱藏的 div），通過當(dāng)前 hover 到的 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;
    }
}

至此，一個簡單的純 CSS 實(shí)現(xiàn)鼠標(biāo)跟隨的效果就實(shí)現(xiàn)了，方便大家理解，看看下面這張圖就明白了：

完整的DEMO，你可以戳這里看看：CodePen Demo -- CSS實(shí)現(xiàn)鼠標(biāo)跟隨

存在的問題

就上面的 Demo 來看，還是有很多瑕疵的，譬如

精度太差

只能控制元素運(yùn)動到 div 所在空間，而不是精確的鼠標(biāo)所在位置，針對這一點(diǎn)，我們可以通過增加隱藏的 div 的數(shù)量來優(yōu)化。譬如將 100 個平鋪 div 增加到 1000 個平鋪 div。

運(yùn)動不夠絲滑

效果看起來不夠絲滑，這個可能需要通過合理的緩動函數(shù)，適當(dāng)?shù)膭赢嬔訒r來優(yōu)化。

燥起來吧

嗯。原理掌握了，下面我們來看看，使用這個技巧還能鼓搗出什么有意思的效果。

CSS鼠標(biāo)跟隨按鈕效果

一開始，我在 CodePen 上看到了下面這個效果，使用了 SVG + CSS + JS 實(shí)現(xiàn)，我就想著，僅用 CSS，能不能 copy 一下：

CodePen Demo -- Gooey mouse follow

好吧，理想很豐滿，現(xiàn)實(shí)很骨感。僅僅使用 CSS，還是有諸多限制。

• 但是我們還是可以使用上述介紹的方法實(shí)現(xiàn)鼠標(biāo)跟隨

• 利用 CSS 濾鏡 filter: blur() contrast() 模擬元素融合，具體可以看看這篇文章：你所不知道的 CSS 濾鏡技巧與細(xì)節(jié)

好，看看僅僅使用 CSS 的破產(chǎn)版模擬效果：

有點(diǎn)太太太奇怪了，可以稍微收斂點(diǎn)效果，通過調(diào)整顏色，濾鏡強(qiáng)度（就是各種嘗試...），得到一個稍微好一丟丟丟的類似效果：

Demo 戳我，CodePen Demo -- CSS鼠標(biāo)跟隨按鈕效果

全屏鼠標(biāo)跟隨動畫

OK，繼續(xù)，下面來點(diǎn)更炫的。嗯，就是那種華而不實(shí)的。sweat_smile

如果我們控制的不止一個元素，而是多個元素。多個元素之間的動畫效果再設(shè)定不同的 transition-delay ，順序延遲運(yùn)動。哇哦，想想就很激動。譬如這樣：

CodePen Demo -- 鼠標(biāo)跟隨動畫 PURE CSS MAGIC MIX

如果我們能更有想象力一點(diǎn)，那么可以再碰撞出多一點(diǎn)的火花：

這個效果是我非常喜歡的一位日本 CodePen 作者 Yusuke Nakaya 的作品，源代碼: Demo -- Only CSS: Water Surface

鼠標(biāo)跟隨指示

當(dāng)然，不一定要指示元素運(yùn)動。使用 div 鋪滿頁面捕捉元素當(dāng)前位置的技巧，還可以運(yùn)用在其他一些效果上，譬如指示出鼠標(biāo)運(yùn)動軌跡：

1、默認(rèn)的鋪滿背景的 div 的 transition-duration: 0.5s

2、當(dāng) hover 到元素背景 div 的時候，改變當(dāng)前 hover 到的 div 的 transition-duration: 0s，并且 hover 的時候賦予背景色，這樣當(dāng)前 hover 到的 div 會立即展示

3、當(dāng)鼠標(biāo)離開 div，div 的 transition-duration 變回默認(rèn)狀態(tài)，也就是 transition-duration: 0.5s，同時背景色消失，這樣被離開的 div 的背景色將慢慢過渡到透明，造成虛影的效果

CodePen Demo -- cancle transition

以上就是CSS實(shí)現(xiàn)鼠標(biāo)跟隨效果，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。