你有沒有想過，鼠標(biāo)點(diǎn)擊的地方其實(shí)可以“變色”？不是幻覺，也不是特效，而是通過一點(diǎn)點(diǎn)代碼和創(chuàng)意，讓每一次點(diǎn)擊都變得生動有趣——比如在網(wǎng)頁上留下一個(gè)溫柔的紅點(diǎn)、一個(gè)閃亮的藍(lán)圈，甚至是一個(gè)會跳動的小星星。
很多人以為這是高級動畫才有的效果，其實(shí)很簡單！今天我就用問答形式，帶你一步步實(shí)現(xiàn)這個(gè)小技巧，適合發(fā)朋友圈或小紅書，讓粉絲秒變“技術(shù)流”。
Q：為什么我的鼠標(biāo)點(diǎn)擊沒反應(yīng)？
別急！首先要確保你是在瀏覽器里操作。如果你只是在記事本里寫代碼，那當(dāng)然不會看到效果。建議打開 Chrome 或 Edge 瀏覽器，按 F12 打開開發(fā)者工具，然后在控制臺（Console）里輸入以下代碼：
document.addEventListener('click', function(e) { const dot = document.createElement('div'); dot.style.position = 'fixed'; dot.style.left = e.clientX + 'px'; dot.style.top = e.clientY + 'px'; dot.style.width = '30px'; dot.style.height = '30px'; dot.style.backgroundColor = 'ff4d6d'; // 粉紅色 dot.style.borderRadius = '50%'; dot.style.pointerEvents = 'none'; dot.style.zIndex = '9999'; document.body.appendChild(dot); setTimeout(() => { dot.remove(); }, 800);});按下回車，再隨便點(diǎn)一下頁面——看！是不是彈出一個(gè)小粉點(diǎn)？這就是你的“點(diǎn)擊印記”！
Q：能不能讓它更酷一點(diǎn)？比如變成彩虹色？
當(dāng)然可以！我朋友小林就在她的個(gè)人博客上用了這個(gè)功能，每次點(diǎn)擊都會隨機(jī)生成一種顏色，而且還會慢慢淡出。她還加了個(gè)輕微的縮放動畫，讓點(diǎn)擊痕跡像水波紋一樣擴(kuò)散，超治愈！
你可以這樣改：
const colors = ['ff4d6d', '47b8e0', 'ffd700', '9c27b0'];const color = colors[Math.floor(Math.random() colors.length)];dot.style.backgroundColor = color;dot.style.transform = 'scale(0)';dot.style.transition = 'transform 0.3s easeout';setTimeout(() => { dot.style.transform = 'scale(1)';}, 10);是不是瞬間從“普通用戶”升級成“交互設(shè)計(jì)師”？小紅書上很多博主都在模仿這種細(xì)節(jié)，因?yàn)檎娴奶杏洃淈c(diǎn)了！
Q：這能用在什么場景？
真實(shí)案例來了！我有個(gè)做教育類內(nèi)容的朋友，他在視頻下方加了這個(gè)點(diǎn)擊反饋，學(xué)生點(diǎn)哪里就出現(xiàn)對應(yīng)顏色的小圓點(diǎn)，不僅增加互動感，還能分析哪些區(qū)域最常被點(diǎn)擊——數(shù)據(jù)驅(qū)動教學(xué)，不香嗎？
還有人把它用在簡歷網(wǎng)站上，點(diǎn)擊“項(xiàng)目”按鈕時(shí)，出現(xiàn)一個(gè)綠色光暈，視覺引導(dǎo)超清晰。你看，這不是炫技，是讓內(nèi)容更有溫度。
所以，別再說“鼠標(biāo)只能點(diǎn)鏈接”啦～只要一點(diǎn)點(diǎn)代碼，就能讓你的內(nèi)容“活”起來。試試看吧，下次發(fā)朋友圈，直接配文：“點(diǎn)擊我，我會變色?”——誰看了不說一句“哇，好細(xì)膩！”？
