溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了CSS鼠標指針交互效果怎么實現的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇CSS鼠標指針交互效果怎么實現文章都會有所收獲，下面我們一起來看看吧。
首先，第一個問題，我們可以看到，上圖中，鼠標指針的樣式被修改成了一個圓點：
正常而言應該是這樣：
當然，這里比較簡單，在 CSS 中，我們可以通過 cursor 樣式，對鼠標指針形狀進行修改。
cursor 修改鼠標樣式cursor CSS 屬性設置鼠標指針的類型，在鼠標指針懸停在元素上時顯示相應樣式。
cursor: auto; cursor: pointer; ... cursor: zoom-out; /* 使用圖片 */ cursor: url(hand.cur) /* 使用圖片，并且設置 fallback 兜底 */ cursor: url(hand.cur), pointer;
這個大家應該都清楚，通常而言，在不同場景下，選擇不同鼠標指針樣式，也是一種提升用戶體驗的手段。
當然，在本交互中，我們并非要將 cursor 光標設置成任一樣式，剛好相反，我們需要將他隱藏。
cursor: none 隱藏光標在這里，我們通過 cursor: none 隱藏頁面的鼠標指針：
{
cursor: none;
}如此一來，頁面上的鼠標指針就消失了：
既然，消失了，我們就簡單模擬一個鼠標指針。
我們首先實現一個 10px x 10px 的圓形 div，設置為基于 <body> 絕對定位：
<div id="g-pointer"></div>
#g-pointer {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
background: #000;
border-radius: 50%;
}那么，在頁面上，我們就得到了一個圓形黑點：
接著，通過事件監聽，監聽 body 上的 mousemove，將小圓形的位置與實時鼠標指針位置重合：
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);
});
});這樣，如果不設置 cursor: none，將會是這樣一個效果：
再給 body 加上 cursor: none，就相當于模擬了一個鼠標指針：
在這個基礎上，由于現在的鼠標指針，實際上是個 div，因此我們可以給它加上任意的交互效果。
以文章一開頭的例子為例，我們只需要借助混合模式 mix-blend-mode: exclusion，就能夠實現讓模擬的鼠標指針能夠智能地在不同背景色下改變自己的顏色。
完整的代碼：
<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 halfAlementWidth3 = element2.offsetWidth / 2;
function setPosition(x, y) {
element.style.transform = `translate(${x - halfAlementWidth}px, ${y - halfAlementWidth}px)`;
element2.style.transform = `translate(${x - halfAlementWidth3}px, ${y - halfAlementWidth3}px)`;
}
body.addEventListener('mousemove', (e) => {
window.requestAnimationFrame(function(){
setPosition(e.clientX, e.clientY);
});
});我們就能完美還原出題圖的效果：
有一點需要注意的是，利用模擬的鼠標指針去 Hover 元素，Click 元素的時候，會發現這些事件都無法觸發。
這是由于，此時被隱藏的指針下面，其實懸浮的我們模擬鼠標指針，因此，所有的 Hover、Click 事件都觸發在了這個元素之上。
當然，這個也非常好解決，我們只需要給模擬指針的元素，添加上 pointer-events: none，阻止默認的鼠標事件，讓事件透傳即可：
{
pointer-events: none;
}關于“CSS鼠標指針交互效果怎么實現”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“CSS鼠標指針交互效果怎么實現”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
