不可思議的純 CSS 實(shí)現(xiàn)鼠標(biāo)跟隨效果

phpmatt 發(fā)布于2019-04-23 11:47 / 2574人閱讀

摘要：當(dāng)然，本文的重點(diǎn)，就是介紹如何在不借助的情況下使用來(lái)模擬實(shí)現(xiàn)一些鼠標(biāo)跟隨的行為動(dòng)畫效果。原理以上面的為例子，要使用實(shí)現(xiàn)鼠標(biāo)跟隨，最重要的一點(diǎn)就是如何實(shí)時(shí)監(jiān)測(cè)到當(dāng)前鼠標(biāo)處于何處，其實(shí)很多效果，都離不開障眼法二字。

直接進(jìn)入正題，鼠標(biāo)跟隨，顧名思義，就是元素會(huì)跟隨著鼠標(biāo)的移動(dòng)而作出相應(yīng)的運(yùn)動(dòng)。大概類似于這樣：

通常而言，CSS 負(fù)責(zé)表現(xiàn)，JavaScript 負(fù)責(zé)行為。而鼠標(biāo)跟隨這種效果屬于行為，要實(shí)現(xiàn)通常都需要借助 JS。

當(dāng)然，本文的重點(diǎn)，就是介紹如何在不借助 JS 的情況下使用 CSS 來(lái)模擬實(shí)現(xiàn)一些鼠標(biāo)跟隨的行為動(dòng)畫效果。

原理

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

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

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

我們使用 100 個(gè)元素，將整個(gè)頁(yè)面鋪滿，hover 的時(shí)，展示顏色，核心 SCSS 代碼如下：


  
  
  
  
  ... // 100個(gè)

.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)
    }
}

可以得到這樣的效果：

好的，如果把每個(gè)元素的 hover 效果去掉，那么這個(gè)時(shí)候操作頁(yè)面，其實(shí)是沒有任何效果的。但同時(shí)，通過(guò)?:hover?偽類，我們又是可以大概得知當(dāng)前鼠標(biāo)是處于頁(yè)面上哪個(gè)區(qū)間的。

好繼續(xù)，我們?cè)俳o頁(yè)面添加一個(gè)元素（圓形小球），將它絕對(duì)定位到頁(yè)面中間：

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

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

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

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

?

存在的問(wèn)題

就上面的 Demo 來(lái)看，還是有很多瑕疵的，譬如

精度太差

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

運(yùn)動(dòng)不夠絲滑

效果看起來(lái)不夠絲滑，這個(gè)可能需要通過(guò)合理的緩動(dòng)函數(shù)，適當(dāng)?shù)膭?dòng)畫延時(shí)來(lái)優(yōu)化。

燥起來(lái)吧

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

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

一開始，我在 CodePen 上看到了下面這個(gè)效果，使用了?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)效果，通過(guò)調(diào)整顏色，濾鏡強(qiáng)度（就是各種嘗試...），得到一個(gè)稍微好一丟丟丟的類似效果：

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

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

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

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

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

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

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

鼠標(biāo)跟隨指示

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

默認(rèn)的鋪滿背景的 div 的?transition-duration: 0.5s
當(dāng) hover 到元素背景 div 的時(shí)候，改變當(dāng)前 hover 到的 div 的?transition-duration: 0s，并且 hover 的時(shí)候賦予背景色，這樣當(dāng)前 hover 到的 div 會(huì)立即展示
當(dāng)鼠標(biāo)離開 div，div 的?transition-duration?變回默認(rèn)狀態(tài)，也就是?transition-duration: 0.5s，同時(shí)背景色消失，這樣被離開的 div 的背景色將慢慢過(guò)渡到透明，造成虛影的效果

CodePen Demo -- cancle transition

最后

其實(shí)還有很多有意思的用法，感興趣的同學(xué)可以自己動(dòng)手，更多的去嘗試，組合。

經(jīng)常有人會(huì)問(wèn)我，這些奇奇怪怪的用法實(shí)際業(yè)務(wù)中用得上嗎？到底有用沒用。額，我的看法是也許業(yè)務(wù)中真的用不上或者應(yīng)用場(chǎng)景極為有限，但是多了解一些，能在遇到問(wèn)題的時(shí)候多點(diǎn)選擇，多一些思考的空間，更好的發(fā)散思維，至少是無(wú)害吧。

更多你可能想都想不到的有趣的 CSS 你可以來(lái)這里瞧瞧：

CSS-Inspiration -- CSS靈感

更多精彩 CSS 技術(shù)文章匯總在我的?Github -- iCSS?，持續(xù)更新，歡迎點(diǎn)個(gè) star 訂閱收藏。

好了，本文到此結(jié)束，希望對(duì)你有幫助 :)

如果還有什么疑問(wèn)或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬(wàn)望告知。

GPU云服務(wù)器云服務(wù)器 jquery鼠標(biāo)跟隨 DIV跟隨鼠標(biāo)移動(dòng) js中鼠標(biāo)跟隨跟隨效果

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1154.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

phpmatt

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

#雙11# gigsgigscloud：送現(xiàn)金卷+送時(shí)間買1送1，美國(guó)CN2 GIA VPS，低至$

閱讀 3717·2021-11-11 11:00
C++游戲編程教程（五）——項(xiàng)目實(shí)戰(zhàn)

閱讀 2197·2021-10-08 10:05
繼電器保護(hù)電路設(shè)計(jì)

閱讀 2709·2021-10-08 10:04
一起用Python做個(gè)上課點(diǎn)名器，好玩又實(shí)用！

閱讀 3222·2021-09-30 09:48
寶塔Linux面板專業(yè)版：收費(fèi)版Nginx防火墻設(shè)置教程

閱讀 3813·2021-09-27 14:10
2021-09-08三道程序（序列中刪除指定數(shù)字、有序序列判斷、有序序列合并）

閱讀 1713·2021-09-09 09:33
Weex系列(7) ——踩坑填坑的總總

閱讀 2110·2019-08-30 15:55
關(guān)于CSS HACK

閱讀 1614·2019-08-30 13:53

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！