有趣的鼠标指针交互探索

时间：2023-03-28 12:59:18 HTML

浠婂ぉ锛屽疄鐜拌繖鏍蜂竴涓湁瓒ｇ殑浜や簰鏁堟灉锛氬皢鍘熸潵鐨勯紶鏍囨寚閽堟牱寮忎慨鏀规垚鑷繁鎯宠鐨勬晥鏋滐紝骞舵坊鍔犱竴浜涚壒娈婄殑浜や簰鏁堟灉銆備慨鏀归紶鏍囨牱寮忛鍏堢涓€涓棶棰橈紝鎴戜滑鍙互鐪嬪埌鍦ㄤ笂鍥句腑锛岄紶鏍囨寚閽堢殑鏍峰紡琚慨鏀规垚浜嗕竴涓偣锛氭甯告潵璇达紝搴旇鏄繖鏍风殑锛氬綋鐒讹紝杩欎釜姣旇緝绠€鍗曘€傚湪CSS涓紝鎴戜滑鍙互閫氳繃鍏夋爣鏍峰紡鏉ヤ慨鏀归紶鏍囨寚閽堢殑褰㈢姸銆備娇鐢ㄥ厜鏍囦慨鏀归紶鏍囨牱寮忋€俢ursorCSS灞炴€ц缃紶鏍囨寚閽堢殑绫诲瀷锛屽綋榧犳爣鎸囬拡鎮仠鍦ㄥ厓绱犱笂鏃舵樉绀虹浉搴旂殑鏍峰紡銆俢ursor:auto;cursor:pointer;...cursor:zoom-out;/*浣跨敤鍥剧墖*/cursor:url(hand.cur)/*浣跨敤鍥剧墖锛屽苟璁剧疆fallbackpocket*/cursor:url(hand.cur),鎸囬拡;杩欎竴鐐瑰ぇ瀹跺簲璇ラ兘娓呮銆備竴鑸潵璇达紝鍦ㄤ笉鍚岀殑鍦烘櫙涓嬶紝閫夋嫨涓嶅悓鐨勯紶鏍囨寚閽堟牱寮忎篃鏄竴绉嶆彁鍗囩敤鎴蜂綋楠岀殑鎵嬫銆傚綋鐒讹紝鍦ㄨ繖涓氦浜掍腑锛屾垜浠笉鎯冲皢鍏夋爣璁剧疆鎴愪换浣曟牱寮忥紝鐩稿弽锛屾垜浠渶瑕佸皢鍏堕殣钘忋€傞€氳繃cursor:none闅愯棌鍏夋爣杩欓噷鎴戜滑閫氳繃cursor:none:{cursor:none;}闅愯棌椤甸潰涓婄殑榧犳爣鎸囬拡杩欐牱锛岄〉闈笂鐨勯紶鏍囨寚閽堟秷澶憋細閫氳繃鍏ㄥ眬浜嬩欢鐩戝惉锛屾ā鎷熼紶鏍囨寚閽堟秷澶憋紝鎴戜滑绠€鍗曞湴妯℃嫙涓€涓紶鏍囨寚閽堛€傛垜浠厛瀹炵幇涓€涓?0pxx10px鐨勫渾褰iv锛岃缃负鍩轰簬鐨勭粷瀵瑰畾浣嶏細

#g-pointer{position:absolute;椤堕儴锛?锛涘乏锛?锛涘搴︼細10px锛涢珮搴︼細10px锛涜儗鏅細#000锛沚order-radius:50%;}鐒跺悗锛屽湪椤甸潰涓婏紝鎴戜滑寰楀埌涓€涓渾褰㈢殑榛戠偣锛氱劧鍚庨€氳繃浜嬩欢鐩戝惉锛岀洃鍚琤ody涓婄殑mousemove锛屽皬鍦嗗湀鐨勪綅缃笌瀹炴椂榧犳爣鎸囬拡浣嶇疆閲嶅悎锛歝onstelement=document.getElementById("g-pointer");constbody=document.querySelector("body");functionsetPosition(x,y){鍏冪礌銆俿tyle.transform=`translate(${x}px,${y}px)`;}body.addEventListener('mousemove',(e)=>{window.requestAnimationFrame(function(){setPosition(e.clientX-5,e.clientY-5);});});杩欐牱濡傛灉涓嶈缃甤ursor:none锛屽氨浼氭湁杩欐牱鐨勬晥鏋滐細鍦╞ody涓姞涓奵ursor:none锛岀浉褰撲簬妯℃嫙涓€涓紶鏍囨寚閽堬細鍦ㄦ鍩虹涓婏紝鐢变簬褰撳墠榧犳爣鎸囬拡鍏跺疄鏄竴涓猟iv锛屾垜浠彲浠ョ粰瀹冩坊鍔犱换浣曚氦浜掓晥鏋溿€備互鏂囩珷寮€澶寸殑渚嬪瓙涓轰緥锛屾垜浠彧闇€瑕佷娇鐢ㄦ贩鍚堟ā寮弇ix-blend-mode:exclusion灏卞彲浠ュ疄鐜版ā鎷熼紶鏍囨寚閽堝湪涓嶅悓鑳屾櫙鑹蹭笅鏅鸿兘鍙樿壊銆傚鏋滀綘瀵规贩鍚堟ā寮忕殑鎶€宸ц繕鏈夌枒鎯戯紝鍙互鐪嬬湅鎴戠殑鏂囩珷锛氫娇鐢ㄦ贩鍚堟ā寮忚鏂囨湰鏅鸿兘閫傞厤鑳屾櫙鑹插畬鏁翠唬鐮侊細

Loremipsumdolorsitamet

body{cursor:none;鑳屾櫙鑹诧細#fff;}#g-pointer-1,#g-pointer-2{浣嶇疆锛氱粷瀵癸紱椤堕儴锛?锛涘乏锛?锛涘搴︼細12px锛涢珮搴︼細12px锛涜儗鏅細#999锛涜竟鐣屽崐寰勶細50%锛涙ā寮忥細鎺掗櫎锛泎-index:1;}#g-pointer-2{瀹藉害:42px;楂樺害锛?2px锛涜儗鏅細#222锛涜繃娓★細.2s缂撳嚭锛泒constbody=document.querySelector("body");constelement=document.getElementById("g-pointer-1");constelement2=document.getElementById("g-pointer-2");consthalfAlementWidth=element.offsetWidth/2;consthalfAlementWidth2=element2.offsetWidth/2;functionsetPosition(x,y){element.style.transform=`translate(${x-halfAlementWidth}px,${y-鍝堝皵fAlementWidth}px)`;element2.style.transform=`translate(${x-halfAlementWidth2}px,${y-halfAlementWidth2}px)`;}body.addEventListener('mousemove',(e)=>{window.requestAnimationFrame(function(){setPosition(e.clientX,e.clientY);});});鎴戜滑鍙互瀹岀編杩樺師鏍囬鍥剧墖鐨勬晥鏋滐細瀹屾暣浠ｇ爜锛屽彲浠ョ偣鍑昏繖閲岋細MouseCursorTransition浼被浜嬩欢瑙﹀彂闇€瑕佹敞鎰忕殑涓€鐐规槸锛屽綋浣犱娇鐢ㄦā鎷熼紶鏍囨寚閽堝幓鍒癏over鍏冪礌鎴栬€匔lick鍏冪礌鏃讹紝浣犱細鍙戠幇鏃犳硶瑙﹀彂杩欎簺浜嬩欢銆傝繖鏄洜涓猴紝姝ゆ椂鍦ㄩ殣钘忔寚閽堜笅锛屾垜浠疄闄呬笂妯℃嫙鐨勬槸榧犳爣鎸囬拡鎮诞銆傚洜姝わ紝鎵€鏈夋偓鍋滃拰鍗曞嚮浜嬩欢閮戒細鍦ㄦ鍏冪礌涓婅Е鍙戙€傚綋鐒讹紝杩欎篃寰堝鏄撹В鍐炽€傛垜浠彧闇€瑕佸湪妯℃嫙鎸囬拡鐨勫厓绱犱腑娣诲姞pointer-events:none鏉ラ樆姝㈤粯璁ょ殑榧犳爣浜嬩欢锛岃浜嬩欢閫氳繃:{pointer-events:none;}榧犳爣璺熼殢锛屼笉浠呭姝わ紝褰撶劧杩欓噷鐨勬牳蹇冩槸榧犳爣璺熼殢鍔ㄧ敾锛屽厜鏍囷細鏃犮€傛澶栵紝瀵逛簬榧犳爣璺熼殢锛屾垜浠笉涓€瀹氳浣跨敤JavaScript銆傛垜鍦ㄣ€婁笉鍙€濊鐨勯紶鏍囪窡闅忕函CSS瀹炵幇銆嬩竴鏂囦腑浠嬬粛浜嗛紶鏍囪窡闅忔晥鏋滅殑绾疌SS瀹炵幇锛屾湁鍏磋叮鐨勪篃鍙互鐪嬬湅銆傚熀浜庣函CSS榧犳爣璺熼殢锛岄厤鍚坈ursor:none锛岃繕鍙互鍒朵綔涓€浜涙湁瓒ｇ殑鍔ㄧ敾鏁堟灉銆傚儚杩欐牱锛欳odePenDemo--Cancletransition&cursornone鏈枃鍒版缁撴潫锛屽笇鏈涘浣犳湁鎵€甯姪:)鎯宠鑾峰彇鏈€鏈夎叮鐨凜SS璧勮锛屼笉瑕侀敊杩囨垜鐨勫叕浼楀彿--iCSS鍓嶇瓒ｉ椈馃槃鏇村绮惧僵CSS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屾寔缁洿鏂般€傛杩庣偣涓槦璁㈤槄鏀惰棌銆傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>