S11LPL鏄ュ璧涙渶杩戝紑濮嬩簡銆傚湪鐪嬫瘮璧涚殑杩囩▼涓紝鎴戝湪鏂拌禌瀛ｇ殑Ban/Pick閫夋嫨闃舵鍙戠幇浜嗕竴涓柊濂囨湁瓒ｇ殑閬斀鏁堟灉锛屽涓嬪浘鎵€绀猴細褰撶劧鏄姩鎬佹晥鏋溿€侱uringtheprocessofbeingelected,therewillbeabreathingeffect:theGifimageisabitblurry.鎬荤殑鏉ヨ锛屾槸涓€绉嶆帴杩戜簬闆剧殑钂欑増鏁堟灉銆傝€屼笖锛屼粬鍙互鍔ㄦ€佸彉鍖栥€傛湰鏂囧皢鎺㈣濡備綍鍦–SS涓疄鐜扮被浼肩殑鏁堟灉銆傚疄鐜扮儫闆捐挋鐗堟晥鏋滈鍏堟垜浠潵灏濊瘯瀹炵幇杩欐牱涓€涓姩鎬佽挋鐗堬細鍋囪娌℃湁妯＄硦杈圭紭鍜岀儫闆炬晥鏋滐紝瀹冨疄闄呬笂鏄竴涓笎鍙橈細
div{width:340px;楂樺害锛?80px锛涜竟妗嗭細2px瀹炲績#5b595b锛沚ackground:linear-gradient(rgba(229,23,49,1),rgba(229,23,49,.9)48%,transparent55%,);}閫氳繃涓婇潰鐨勪唬鐮侊紝鎴戜滑鍙互寰楀埌锛氱湅璧锋潵寰堟櫘閫氾紝鎴戜滑鎬庝箞鐢ㄥ畠鏉ュ緱鍒伴浘鍖栨晥鏋滃憿锛熻鍒扮儫闆撅紝鑱槑鐨勫悓瀛﹀簲璇ヨ兘鎯冲埌婊ら暅锛屽綋鐒舵槸SVG鐨?feturbulence>婊ら暅銆傛槸鐨勶紝瀹冨張鍑虹幇浜嗭紝
鐪熺殑寰堟湁瓒ｏ紝鎴戞渶杩戜袱绡囧叧浜庡畠鐨勬枃绔?-澶浜嗭紒锛丆SS涔熻兘瀹炵幇鐑熼浘鏁堟灉鍚楋紵锛屾儕浜虹殑锛侊紒CSS涔熻兘瀹炵幇Aurora鍚楋紵鍙互涓€璧疯銆?feturbulence>鐨則ype="fractalNoise"瀵逛簬妯℃嫙浜戞晥鏋滈潪甯告湁鐢ㄣ€傝繖涓护闀滀娇鐢ㄦ煆鏋楀櫔澹板嚱鏁板垱寤哄浘鍍忥紝鍙互瀹炵幇鍗婇€忔槑鐨勭儫鐔忔垨娉㈡氮鍥惧儚锛岀敤浜庡疄鐜颁竴浜涚壒娈婄殑绾圭悊銆傝繖閲岋紝鎴戜滑浣跨敤婊ら暅瀵逛笂闈㈢殑鍥惧舰杩涜绠€鍗曞鐞嗭細CSS涓彲浠ヤ娇鐢╢ilter:url()寮曞叆瀵瑰簲elements婊ら暅锛歞iv{...filter:url(#smoke);}婊ら暅鍏冪礌鐨勬晥鏋滐細鐢变簬鎴戠粰鍏冪礌鍔犱簡杈规锛屾暣涓竟妗嗕篃闆惧寲浜嗭紝杩欎笉鏄垜浠兂瑕佺殑銆傚彲浠ヤ娇鐢ㄤ吉鍏冪礌瀵瑰叾杩涜淇グ锛岃竟妗嗗簲鐢ㄤ簬瀹瑰櫒锛屼吉鍏冪礌鐢ㄤ簬瀹炵幇娓愬彉锛屾护闀滃簲鐢ㄤ簬浼厓绱狅細div{position:relative;瀹藉害锛?40px锛涢珮搴︼細180px锛涜竟妗嗭細2px瀹炲績#5b595b锛?::涔嬪墠{鍐呭锛氣€溾€濓紱浣嶇疆锛氱粷瀵癸紱宸︼細0锛涢《閮細0锛涘彸锛?锛涘簳閮細0锛涜儗鏅細绾挎€ф笎鍙橈紙30deg,rgba(229,23,49,1),rgba(229,23,49,.9)48%,transparent55%,);杩囨护鍣細缃戝潃锛堬純鎶界儫锛?}}鏀归€犲悗鐨勬晥鏋滃涓嬶細OK锛屽張杩戜簡涓€姝ワ紝浣嗘槸鍛ㄥ洿杩樻湁寰堝鐟曠柕娌℃湁琛ヤ笂銆傞棶棰樹笉澶с€傛垜浠敼鍙榯op\left\right\bottom鐨勫畾浣嶏紝璁╀吉鍏冪礌瓒呭嚭鐖禖ontainer锛岀埗瀹瑰櫒鍙互璁剧疆overflow:hidden:div{....overflow:hidden;&::before{....宸︼細-20px锛涢《閮細-10px锛涘彸锛?20px锛涘簳閮細-20px锛涜儗鏅細绾挎€ф笎鍙橈紙30deg,rgba(229,23,49,1),rgba(229,23,49,.9)48%,transparent55%,);杩囨护鍣細缃戝潃锛?smoke锛夛紱}}璋冩暣鍚庯紝鐪嬫晥鏋滐細鏈夌偣閭ｇ鎰熻銆備笅涓€姝ユ槸璁╃儫闆惧厓绱犵Щ鍔ㄣ€備负浜嗚鏁翠釜鏁堟灉杩炶疮锛堝洜涓篠VG鍔ㄧ敾鏈韩涓嶆敮鎸乤nimation-fill-mode:alternate杩欐牱鐨勭壒鎬э級锛屾垜浠繕闇€瑕佸啓涓€鐐笿avaScript浠ｇ爜鏉ユ帶鍒跺姩鐢荤殑鏁翠綋寰幆銆傚ぇ姒傜殑浠ｇ爜鏄繖鏍风殑锛歝onstfilter=document.querySelector("#turbulence");letframes=1;letrad=Math.PI/180;letbfx,bfy;functionfreqAnimation(){frames+=.35;bfx=0.035;bfy=0.015;bfx+=0.006*Math.cos(甯?寮у害);bfy+=0.004*Math.sin(frames*rad);bf=bfx.toString()+""+bfy.toString();filter.setAttributeNS(null,"baseFrequency",bf);window.requestAnimationFrame(freqAnimation);}window.requestAnimationFrame(freqAnimation);杩欐浠ｇ爜瀹為檯涓婂彧鏈変竴浠朵簨锛屽氨鏄SVGbaseFrequency灞炴€х殑#turbulence杩囨护鍣紝鍦ㄤ竴涓尯闂村唴鏃犻檺寰幆锛屼粎姝よ€屽凡銆傞€氳繃鏀瑰彉baseFrequency锛屾暣涓儫闆句笉鏂彉鍖栥€傝嚦姝わ紝鎴戜滑灏卞緱鍒颁簡涓€涓畬鏁寸殑銆佷細鍔ㄧ殑鐑熼浘闈㈠叿锛氬湪涓嬪浘涓坊鍔犲浘鐗囷紝灏卞彲浠ュ緱鍒板紑澶寸粰鍑虹殑鏁堟灉鍥句簡锛氬畬鏁翠唬鐮佸彲浠ョ偣杩欓噷鈥斺€擟odePenDemos鈥斺€?LPLBANPICKMASKEffect瀹炵幇鍛煎惛鐘舵€佺殑闈㈠叿鏁堟灉銆傚湪涓婇潰鐨勫熀纭€涓婏紝娣诲姞鍛煎惛鏁堟灉鍏跺疄寰堢畝鍗曘€傛垜浠彧闇€瑕佹敼鍙樻笎鍙樼殑涓€涓綅缃€傛湁寰堝鏂规硶銆傝繖閲屾垜浼氱粰鍑轰竴涓瘮杈冧紭闆呬絾鍙兘涓嶅お鍏煎鐨勬柟娉曗€斺€擟SS@property銆傜畝鍗曚慨鏀逛笂闈㈢殑浠ｇ爜锛欯property--per{syntax:"";缁ф壙锛氬亣鐨勶紱鍒濆鍊硷細22%锛泒div::before{...鑳屾櫙锛氱嚎鎬ф搴︼紙30deg锛?ff0020锛宺gba锛?29銆?3銆?9锛?9锛塿ar锛?-per锛夛紝閫忔槑璁＄畻锛坴ar锛?-姣?+8%),);杩囨护鍣細缃戝潃锛?smoke锛夛紱鍔ㄧ敾锛氭敼鍙?s鏃犻檺缂撳嚭锛泒@keyframes鏀瑰彉{50%{--per:18%;}}杩欐牱鍛煎惛鏁堟灉灏卞疄鐜颁簡锛氬畬鏁翠唬鐮侊紝鍙互鐐硅繖閲?-CodePenDemos--LPLBANPICKMASKEffect缁堜簬鍋氬ソ浜嗭紝鏈枃鍒版缁撴潫锛屽笇鏈涙湰鏂囧浣犳湁鎵€甯姪:)鎯宠鑾峰彇鏈€鏈夎叮鐨凜SS璧勮锛屽崈涓囦笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇濂囬椈馃槃鏇村绮惧僵CSS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屾寔缁洿鏂帮紝娆㈣繋鐐硅禐鏄熻闃呮敹钘忓す銆傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>
