站長(zhǎng)資訊網(wǎng)今天，來(lái)實(shí)現(xiàn)這樣一個(gè)有意思的交互效果，通過這個(gè)交換效果來(lái)聊聊前端鼠標(biāo)指針交互，希望對(duì)大家有所幫助！
將原本的鼠標(biāo)指針樣式，修改成自己想要的效果，并且添加上一些特殊的交互效果?！就扑]學(xué)習(xí)：css視頻教程】
修改鼠標(biāo)樣式
首先，第一個(gè)問題，我們可以看到，上圖中，鼠標(biāo)指針的樣式被修改成了一個(gè)圓點(diǎn)：
正常而言應(yīng)該是這樣：
當(dāng)然，這里比較簡(jiǎn)單，在 CSS 中，我們可以通過 cursor 樣式，對(duì)鼠標(biāo)指針形狀進(jìn)行修改。
利用 cursor 修改鼠標(biāo)樣式
cursor CSS 屬性設(shè)置鼠標(biāo)指針的類型，在鼠標(biāo)指針懸停在元素上時(shí)顯示相應(yīng)樣式。
cursor: auto; cursor: pointer; ... cursor: zoom-out; /* 使用圖片 */ cursor: url(hand.cur) /* 使用圖片，并且設(shè)置 fallback 兜底 */ cursor: url(hand.cur), pointer;
這個(gè)大家應(yīng)該都清楚，通常而言，在不同場(chǎng)景下，選擇不同鼠標(biāo)指針樣式，也是一種提升用戶體驗(yàn)的手段。
當(dāng)然，在本交互中，我們并非要將 cursor 光標(biāo)設(shè)置成任一樣式，剛好相反，我們需要將他隱藏。
通過 cursor: none 隱藏光標(biāo)
在這里，我們通過 cursor: none 隱藏頁(yè)面的鼠標(biāo)指針：
{ cursor: none; }
如此一來(lái)，頁(yè)面上的鼠標(biāo)指針就消失了：
通過全局事件監(jiān)聽，模擬鼠標(biāo)指針
既然，消失了，我們就簡(jiǎn)單模擬一個(gè)鼠標(biāo)指針。
我們首先實(shí)現(xiàn)一個(gè) 10px x 10px 的圓形 div，設(shè)置為基于 <body> 絕對(duì)定位：
<div id="g-pointer"></div>
#g-pointer { position: absolute; top: 0; left: 0; width: 10px; height: 10px; background: #000; border-radius: 50%; }
那么，在頁(yè)面上，我們就得到了一個(gè)圓形黑點(diǎn)：
接著，通過事件監(jiān)聽，監(jiān)聽 body 上的 mousemove，將小圓形的位置與實(shí)時(shí)鼠標(biāo)指針位置重合：
const element = document.getElementById("g-pointer"); const body = document.querySelector("body"); function setPosition(x, y) { element.style.transform = `translate(${x}px, ${y}px)`; } body.addEventListener('mousemove', (e) => { window.requestAnimationFrame(function(){ setPosition(e.clientX - 5, e.clientY - 5); }); });
這樣，如果不設(shè)置 cursor: none，將會(huì)是這樣一個(gè)效果：
再給 body 加上 cursor: none，就相當(dāng)于模擬了一個(gè)鼠標(biāo)指針：
在這個(gè)基礎(chǔ)上，由于現(xiàn)在的鼠標(biāo)指針，實(shí)際上是個(gè) div，因此我們可以給它加上任意的交互效果。
以文章一開頭的例子為例，我們只需要借助混合模式 mix-blend-mode: exclusion，就能夠?qū)崿F(xiàn)讓模擬的鼠標(biāo)指針能夠智能地在不同背景色下改變自己的顏色。
對(duì)于混合模式這個(gè)技巧還有所疑問的，可以看看我的這篇文章：利用混合模式，讓文字智能適配背景顏色
https://github.com/chokcoco/iCSS/issues/169
完整的代碼：
<p>Lorem ipsum dolor sit amet</p> <div id="g-pointer-1"></div> <div id="g-pointer-2"></div>
body { cursor: none; background-color: #fff; } #g-pointer-1, #g-pointer-2 { position: absolute; top: 0; left: 0; width: 12px; height: 12px; background: #999; border-radius: 50%; background-color: #fff; mix-blend-mode: exclusion; z-index: 1; } #g-pointer-2 { width: 42px; height: 42px; background: #222; transition: .2s ease-out; }
const body = document.querySelector("body"); const element = document.getElementById("g-pointer-1"); const element2 = document.getElementById("g-pointer-2"); const halfAlementWidth = element.offsetWidth / 2; const halfAlementWidth2 = element2.offsetWidth / 2; function setPosition(x, y) { element.style.transform = `translate(${x - halfAlementWidth}px, ${y - halfAlementWidth}px)`; element2.style.transform = `translate(${x - halfAlementWidth2}px, ${y - halfAlementWidth2}px)`; } body.addEventListener('mousemove', (e) => { window.requestAnimationFrame(function(){ setPosition(e.clientX, e.clientY); }); });
我們就能完美還原出題圖的效果：
完整的代碼，你可以戳這里：Mouse Cursor Transition
https://codepen.io/Chokcoco/pen/rNJQXXV
偽類事件觸發(fā)
有一點(diǎn)需要注意的是，利用模擬的鼠標(biāo)指針去 Hover 元素，Click 元素的時(shí)候，會(huì)發(fā)現(xiàn)這些事件都無(wú)法觸發(fā)。
這是由于，此時(shí)被隱藏的指針下面，其實(shí)懸浮的我們模擬鼠標(biāo)指針，因此，所有的 Hover、Click 事件都觸發(fā)在了這個(gè)元素之上。
當(dāng)然，這個(gè)也非常好解決，我們只需要給模擬指針的元素，添加上 pointer-events: none，阻止默認(rèn)的鼠標(biāo)事件，讓事件透?jìng)骷纯桑?/p>
{ pointer-events: none; }
鼠標(biāo)跟隨，不僅于此
當(dāng)然，這里核心就是一個(gè)鼠標(biāo)跟隨動(dòng)畫，配合上 cursor: none。
而且，鼠標(biāo)跟隨，我們不一定一定要使用 JavaScript。
我在 不可思議的純 CSS 實(shí)現(xiàn)鼠標(biāo)跟隨 一文中，介紹了一種純 CSS 實(shí)現(xiàn)的鼠標(biāo)跟隨效果，感興趣的也可以看看。
https://github.com/chokcoco/iCSS/issues/46
基于純 CSS 的鼠標(biāo)跟隨，配合 cursor: none，也可以制作出一些有意思的動(dòng)畫效果。像是這樣：
CodePen Demo — Cancle transition & cursor none
https://codepen.io/Chokcoco/pen/gOvZoVv
（學(xué)習(xí)視頻分享：web前端）
