鐪嬪埌涓€涓晥鏋滄槸涓嶆槸鎯宠嚜宸卞疄鐜颁竴涓嬶紵鎴戝氨鏄繖鏍枫€備箣鍓嶇湅杩囦竴涓棰戯紝涓€涓汉鎷跨潃鐏妸璧板湪杩峰閲岋紝鐏妸鍙兘鐓т寒鍛ㄥ洿鐨勭┖闂淬€傛垜鍦ㄦ兂锛屽鏋滅敤鍓嶇鏉ュ疄鐜拌繖涓姛鑳斤紝鎬庝箞瀹炵幇鍛紵浠庢潵娌℃湁鎯宠繃鍚堥€傜殑idea銆傛垜鏈€杩戠湅鍒颁竴涓彨鍋歮ask鐨刢ss灞炴€с€傛垜瑙夊緱鐢ㄨ繖涓潰鑶滃彲浠ヨ揪鍒版兂瑕佺殑鏁堟灉銆傛垜璇曡繃浜嗭紝瀹冨鏁堜簡銆傛湰鏂囪瑙ｅ疄鐜拌繃绋嬨€俶ask鍏堟潵鐪嬬湅css涓殑mask灞炴€с€俶ask灞炴€у厑璁哥敤鎴烽€氳繃灞忚斀鎴栬鍓浘鍍忕殑鐗瑰畾鍖哄煙鏉ラ殣钘忓厓绱犵殑閮ㄥ垎鎴栧叏閮ㄥ彲瑙佸尯鍩熴€備篃灏辨槸璇达紝鎴戜滑鍙互浣跨敤mask鏉ヨ鍓狣OM鍏冪礌鏄剧ず鐨勯儴鍒嗐€備緥濡傦紝鎴戜滑鎯冲彧瀵硅鏄剧ず鍥惧舰鐨勫彸鍗婇儴鍒嗐€傚彲浠ヨ繖鏍峰啓锛?img-box-test{width:665px;楂樺害锛?00px锛涜儗鏅細url(./gqq.jpeg)涓嶉噸澶嶏紱鑳屾櫙澶у皬锛氬寘鍚紱閬僵锛氱嚎鎬ф笎鍙橈紙225deg锛?00050%锛岄€忔槑50%锛夛紱-webkit-mask:linear-gradient(225deg,#00050%,transparent50%);}浠ｇ爜涓璴inear-gradient琛ㄧず鍒囧壊涓€鏉＄嚎锛?25deg琛ㄧず娓愬彉浠庡彸涓婅鍚戝乏涓嬭鍙樺寲瑙掕惤銆?00050%琛ㄧず褰撳彸涓婅锛堣捣濮嬩綅缃級杩涘害杈惧埌50%鏃讹紝浼氬彉鎴?000锛岃繖閲屾槸閫忔槑鐨勬晥鏋滐紝鎹㈡垚鍏朵粬棰滆壊鏁堟灉涓€鏍枫€傞€忔槑50%鏄寚浠?0%浣嶇疆鍒板乏涓嬭锛堢粨鏉熶綅缃級锛屾槸閫忔槑鐨勶紝鎵€浠ユ晥鏋滃鍥撅紝鍙充笂瑙掓樉绀虹殑鏄浘鐗囨湰韬殑鏁堟灉锛屼笅闈㈠乏瑙掓槸閫忔槑鐨勶紝鏄剧ず鑳屾櫙鑹层€備腑闂存湁涓€涓渾鍦堬紝鎵€浠ュ鏋滆鏄剧ず涓€涓渾鍦堬紝鍙細鏄剧ず涓棿鍥剧墖鐨勫唴瀹广€?img-box-test{mask:radial-gradient(circle,transparent0%,rgba(0,0,0,0.2)10%,rgba(0,0,0,1)20%,#000100%);-webkit-mask:radial-gradient(circle,#0000%,#00010%,transparent40%,transparent100%);}璇村埌浠ｇ爜锛宺adial-gradient鐨勬剰鎬濆氨鏄敾涓€涓渾銆傚畠鍙互鏄畬缇庣殑鍦嗗舰鎴栨き鍦嗗舰銆俢ircle琛ㄧず鐢讳竴涓畬缇庣殑鍦嗐€備粠鍦嗗湀锛?%浣嶇疆锛夊埌10%浣嶇疆锛岀粯鍒?000锛岃繖閲屼篃鍙湁閫忔槑搴︾敓鏁堬紝灏辨槸鍥剧墖鏈韩鐨勫唴瀹广€備粠10%鍒?0%锛岄噰鐢ㄦ笎鍙橈紝浠庝笉閫忔槑鍒板畬鍏ㄩ€忔槑銆傛渶鍚庝粠40%鍒?00%锛屽叏閮ㄩ€忔槑锛屾樉绀哄簳鑹层€傞潰鍏锋樉绀轰簡鍥剧墖鐨勪竴閮ㄥ垎銆傝嚦姝わ紝鎴戜滑灏卞彲浠ュ紑濮嬪疄鐜版晥鏋滀簡銆傝繖閲屾湁涓ょ鎬濊矾锛氬浘鐗囧湪涓€涓埗鑺傜偣div涓紝鍥剧墖瑁佸壀鏄剧ず鍦ㄤ笂闈紝鐖惰妭鐐筪iv鏄剧ず榛戣壊鑳屾櫙銆傚浘鐗囪妭鐐瑰仛涓€涓?:after浼厓绱狅紝浼厓绱犲彔鍔犲湪鍥剧墖涓婏紝瑁佸壀浼厓绱犮€傛垜鍦ㄨ繖閲屼娇鐢ㄧ浜屼釜鎯虫硶銆備负浠€涔堥€夋嫨绗簩涓紝鍙槸鍥犱负鎴戝枩娆€?.濡傛灉浣犳兂鑷繁鍐欒瘯璇曪紝鍙互鐢ㄧ涓€涓€濊矾鏉ュ疄鐜般€傚鏋滀綘瀹炵幇浜嗭紝鍙互鍦ㄨ瘎璁轰笅鍥炲鎴戯紝璁╂垜鐪嬬湅浣犵殑瀹炵幇鏁堟灉銆傛€濊矾浜岀殑瀹炵幇浠ｇ爜锛?img-box{position:relative;瀹藉害锛?65px锛涢珮搴︼細400px锛涜儗鏅細url(./gqq.jpeg)涓嶉噸澶嶏紱background-size:contain;}.img-box::after{content:'';浣嶇疆锛氱粷瀵癸紱宸︼細0锛涢《閮細0锛涘搴︼細665px锛涢珮搴︼細400px锛泎-绱㈠紩锛?锛涜儗鏅壊锛?000锛涜挋鐗堬細寰勫悜娓愬彉锛堝渾褰紝閫忔槑0%锛宺gba锛?,0,0,0.2锛?0%锛宺gba锛?,0,0,1锛?0%锛?000100%锛夛紱-webkit-mask:radial-gradient(circle,transparent0%,rgba(0,0,0,0.2)20%,rgba(0,0,0,1)40%,#000100%);}瑁佸壀缂╂斁in鍜宱ut浠ュ疄鐜板厜鍦堝彲浠ョЩ鍔紝鍏夊湀鍙互鏀惧ぇ鍜岀缉灏忋€傛垜闇€瑕佸湪杩欓噷浣跨敤CSS鍙橀噺銆傛垜鍒嗗埆璁剧疆浜?涓彉閲忥細--radius锛氳〃绀哄厜鍦堢殑鍗婂緞--x锛氳〃绀哄渾鐨剎杞磋窛绂?-y锛氳〃绀哄渾鐨剏杞磋窛绂荤劧鍚庡湪::涓缃繖浜涘彉閲廰fter锛氳繖閲屼负浜嗘敼鍙樺厜鍦堢殑澶у皬锛屾垜鐩存帴鐢╰ransition鏉ュ仛銆傚悗闈㈤€氳繃鍏朵粬CSS鏀瑰彉--radius鐨勫€硷紝灏卞彲浠ヨ嚜鍔ㄥ疄鐜板厜鍦堝ぇ灏忕殑缂╂斁鍔ㄧ敾銆?img-box::after{--radius:20%;--x:330px;--y:200px;鍐呭锛?';浣嶇疆锛氱粷瀵癸紱宸︼細0锛涢《閮細0锛涘搴︼細665px锛涢珮搴︼細400px锛泎-绱㈠紩锛?锛涜儗鏅壊锛?000锛涜繃娓★細--鍗婂緞300姣缂撳叆锛涙帺鐮侊細寰勫悜娓愬彉锛堝渾鍦╲ar(--x)var(--y)锛岄€忔槑0%锛宺gba(0,0,0,0.2)var(--radius)锛宺gba(0,0,0,1)璁＄畻(var(--radius)+15%),#000100%);-webkit-mask:radial-gradient(circleatvar(--x)var(--y),transparent0%,rgba(0,0,0,0.2)var(--radius),rgba(0,0,0,1)calc(var(--radius)+15%),#000100%);}.img-box-big::after{--radius:15%;}.img-box-small::after{--radius:5%;transition-duration:100ms;}鍏夊湀璺熼殢锛岄殢鎰忕Щ鍔紝缁堜簬鍒颁簡鏈€鍚庝竴姝ャ€傝嚦姝わ紝鎴戜滑灏辫寮€濮嬩娇鐢↗S鏉ョ洃鍚紶鏍囩殑绉诲姩浜嗐€傚厛鍐欏熀鏈粨鏋勩€傚湪image鑺傜偣鐩戝惉榧犳爣绉诲姩浜嬩欢锛屽鏋滄湁榧犳爣绉诲姩鍒欐墽琛屾柟娉曘€俢onstimgBox=document.getElementById('imgBox');functionmoveLightRing(x,y){//璺熼殢绉诲姩}imgBox.addEventListener('mouseenter',(e)=>{moveLightRing(e.offsetX,e.offsetY);});imgBox.addEventListener('mousemove',(e)=>{moveLightRing(e.offsetX,e.offsetY);});imgBox.addEventListener('mouseout',(e)=>{moveLightRing(e.offsetX,e.offsetY);});鍦╩oveLightRing鏂规硶涓紝瑕佽€冭檻鍑犱釜闂锛氬洜涓洪紶鏍囦笉鍔紝鍏夊湀浼氬彉澶э紝榧犳爣绉诲姩锛屽厜鍦堜細鍙樺皬銆傛墍浠ュ皯閲忕殑杩愬姩涓嶈兘绠椾綔杩愬姩銆傛坊鍔犳牱寮忎互鍦ㄧЩ鍔ㄥ拰鍋滄鏃舵洿鏀瑰厜鍦堢殑鍗婂緞銆傛墍浠oveLightRing鐨勪唬鐮佸涓嬶細functionmoveLightRing(x,y){//鐭椂闂村唴鐭窛绂荤Щ鍔紝涓嶇畻绉诲姩constnewTime=newDate().getTime();濡傛灉(lastMove.time+10>newTime&&lastMove.x+10>x&&lastMove.y+10>y){杩斿洖;}//璁板綍鏈€鍚庝竴涓姩浣渓astMove.time=newTime;lastMove.x=x;lastMove.y=y;//绉诲姩锛岃缃牱寮廼f(imgBox.className.indexOf('img-box-small')===-1){imgBox.className='img-boximg-box-small';}//TODO:淇敼after浼厓绱?-x鐨勬牱寮忥紝--y鐨勫€?/杩炵画绉诲姩锛屼笉瑕佽缃€傚仠姝㈢Щ鍔紝100ms鍚庯紝灏嗗厜鍦堣皟澶с€傛竻闄よ秴鏃讹紙st锛夛紱st=setTimeout(()=>{imgBox.className='img-boximg-box-big';},100);}杩欐槸涓€涓棶棰橈細鎴戞棤娉曡繘琛?:after浼厓绱犳牱寮忚缃€傝В鍐充吉鍏冪礌鐨勬牱寮忛棶棰樼幇鍦ㄨ繕鏈夊彟涓€涓棶棰橈紝鎴戜笉鑳戒负::after浼厓绱犺缃牱寮忋€傚湪缃戜笂鏌ヤ簡璧勬枡璇存槸璁剧疆涓€涓被锛岀劧鍚庨€氳繃绫昏缃吉鍏冪礌銆備絾鏄垜鐨勫満鏅渶瑕佷笉鏂慨鏀瑰睘鎬у€笺€傝繖涓В鍐虫柟妗堝綋鐒朵笉閫傜敤銆傜劧鍚庣獊鐒舵兂鍒拌兘涓嶈兘鐢ㄥ睘鎬х户鎵裤€傛垜浠兘鐭ラ亾鍦–SS涓紝鐖跺厓绱犵殑涓€浜涘睘鎬ф槸鍙互琚瓙鍏冪礌缁ф壙鐨勩€傞偅涔堣繖閲岀殑CSS鑷畾涔夊睘鎬ф槸鍚﹀彲浠ョ户鎵垮憿锛熸垜鏌ヤ簡涓€涓嬶紝鏄彲浠ョ户鎵跨殑锛屾墍浠ユ垜浠殑闂灏辫В鍐充簡銆備慨鏀瑰悗鐨勪唬鐮佸涓嬶細functionmoveLightRing(x,y){//灏嗙埗鑺傜偣鑷畾涔夋牱寮忕殑鍊间慨鏀逛负褰撳墠浣嶇疆imgBox.style.setProperty('--x',x+'px');imgBox.鏍峰紡銆俿etProperty('--y',y+'px');}.img-box{--x:330px;--y:200px;}.img-box::after{--radius:20%;--x锛氱户鎵匡紱--y:inherit;}鍔熻兘瀹屾垚锛屾渶鍚庣湅涓€涓嬫渶缁堟晥鏋滐細瀹屼簡锛屾湰鏂囧埌姝ょ粨鏉燂紝甯屾湜鏈枃瀵逛綘鏈夋墍甯姪:-)鏈€杩戞柊涓婁簡涓€涓煂忓彿锛氬啓浠ｇ爜鍛靛懙锛岃娉ㄦ剰馃槃銆傚悗闈細鎱㈡參绉疮鑷繁鎺屾彙鐨勫墠绔煡璇嗗拰鑱屽満鐭ヨ瘑銆傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>
