巧用SVG滤镜也能做出表情包？
时间：2023-04-02 20:00:26
HTML
鏈枃灏嗕粙缁嶄竴浜涗娇鐢⊿VGfeTurbulence杩囨护鍣ㄥ疄鐜扮殑鏈夎叮銆佸ぇ鑳嗙殑鍔ㄧ敾銆傝绯诲垪鐨勫彟澶栦袱绡囨枃绔狅細鏈夎叮锛佷娇鐢ㄥ己澶х殑SVG婊ら暅甯︽潵涔愯叮锛佷笉瑙勫垯杈规鐢熸垚瑙ｅ喅鏂规鑳屾櫙浠婂ぉ鍦ㄧ兢閲岃亰澶╋紝鐪嬪埌鏈変汉鍙戣繖涓〃鎯咃細鏈€杩戝垰鍦ㄥSVG锛岃剳瀛愰噷灏辨妸杩欎釜琛ㄦ儏鐨勬晥鏋滃拰feTurbulence婊ら暅鑱旂郴璧锋潵浜嗐€傚鏋滄垜浠湁涓€涓被浼间笂闈moji鐨勯潤鎬佸浘鐗囷紝鐢╢eTurbulence鐢熸垚鐨刵oise鍑芥暟灏嗗叾搴旂敤鍒伴潤鎬乪moji涓婏紝鐒跺悗鍔犱笂涓€浜涘姩鐢伙紝鏄笉鏄篃鑳藉仛鍑虹被浼肩殑鍔ㄧ敾鏁堟灉鍛紵浠€涔堟槸SVGfeTurbulence杩囨护鍣紵濡傛灉浣犲SVG杩囨护鍣ㄤ笉鏄緢浜嗚В锛屼綘鍙互绠€鍗曞湴闃呰鎴戠殑杩欑瘒鏂囩珷锛氭湁瓒ｏ紒寮哄ぇ鐨凷VG婊ら暅杩欓噷鎴戜滑灏嗕娇鐢⊿VG涓殑feTurbulence婊ら暅銆傛垜绠€鍗曚粙缁嶄竴涓嬨€俧eTurbulence杩囨护鍣ㄦ箥娴佽〃绀烘箥娴併€佷笉绋冲畾鐨勬皵娴侊紝鑰孲VG杩囨护鍣ㄥ彲瀹炵幇鍗婇€忔槑鐨勭儫闆剧姸鎴栨尝娴姸鍥惧儚銆傞€氬父鐢ㄤ簬瀹炵幇涓€浜涚壒娈婄殑绾圭悊銆傝杩囨护鍣ㄤ娇鐢≒erlin鍣０鍑芥暟鍒涘缓鍥惧儚銆傚櫔娉㈠湪妯℃嫙浜戦浘鏁堟灉鏃堕潪甯告湁鐢紝鍙互浜х敓闈炲父澶嶆潅鐨勭汗鐞嗐€傚彲鐢ㄤ簬瀹炵幇浜戠汗銆佸ぇ鐞嗙煶绾圭瓑浜哄伐绾圭悊鐨勫悎鎴愩€傞殢渚跨湅涓€涓狣EMO锛?div>Coco
Coco .turbulence{filter:url(#fractal);}宸﹁竟鏄櫘閫氭晥鏋滐紝鍚庨潰鏄簲鐢?feTurbulence>鐨勬晥鏋滐紝澶у鍙互璇曡瘯鐐瑰嚮杩涘叆Demo锛屾敼鍙榖aseFrequency鍜宯umOctaves鍙傛暟鐨勫ぇ灏忥紝鍙互鐪嬪埌涓嶅悓鐨勬晥鏋滐細CodePenDemo--feTurbulence鏂囨湰demo灏唂eTurbulence婊ら暅搴旂敤浜庡浘鐗囨垜浠皾璇曞皢涓婇潰DEMO涓殑鏂囧瓧杞崲鎴愬浘鐗囥€傛壘鍒伴潤鎬佸摥娉ｈ〃鎯呭寘锛氱畝鍗曚慨鏀逛唬鐮侊細
div{鑳屾櫙锛歶rl(image.jpg);filter:url(#fractal);}鏁堟灉濡備笅锛氭湁鐐规剰鎬濓紝鎴戜滑閫氳繃feTurbulencefilter鑾峰彇鍣０鍥剧敓鎴愬悗锛屼娇鐢╢eDisplacementMapfilter瀵瑰櫔澹拌繘琛屽彉褰€佹壄鏇层€佹恫鍖杅eTurbulence鐢熸垚鐨勫浘褰㈠緱鍒版渶缁堢殑鏁堟灉銆傞€氳繃璋冩暣feTurbulence涓殑baseFrequency鍜宯umOctaves浠ュ強feDisplacementMap涓殑scale鍙傛暟锛屾垜浠彲浠ヨ皟璇曞緱鍒颁笉鍚岀殑鏁堟灉銆傛帴涓嬫潵锛屾垜浠粰涓婇潰鐨勮繃婊ゅ櫒娣诲姞涓€涓姩鐢伙紝浣跨敤SVG鐨刟nimate鏍囩鏉ュ姩鎬佹敼鍙榖aseFrequency鍙傛暟锛?svg>
涔嬪悗鍔犱笂鍔ㄧ敾锛屼篃浣滅敤浜庡浘鐗囷紝鎴戜滑鍙互寰楀埌濡備笅鏁堟灉锛氱敱浜庢埅鍥捐蒋浠剁殑甯х巼闂锛岀湅璧锋潵鏈夌偣鎱紝鍙互鎴矰EMO鐪嬬湅瀹為檯鏁堟灉锛屾槸鎸烘湁鎰忔€濈殑锛岃嚦姝ゆ垜浠畝鍗曠殑浣跨敤CSS鍜孲VG閫氳繃涓€寮犻潤鎬佸浘鐗囧緱鍒颁竴涓姩鎬佽〃鎯呭寘銆侰odePenDemo--浣跨敤SVG婊ら暅feTurbulence瀹炵幇鍥剧墖鍔ㄧ敾宸у浣跨敤feTurbulence婊ら暅瀹炵幇鍚勭鍔ㄧ敾鏁堟灉鍢垮樋锛屽綋鐒秄eTurbulence涓嶄粎鍙互瀹炵幇杩欎簺锛屼笅闈㈡垜浠潵鎺㈢储涓€浜涙湁瓒ｇ殑鍦烘櫙銆傞鍏堟槑纭竴涓嬫垜浠富瑕佷娇鐢ㄧ殑涓や釜filter锛宖eTurbulence鍜宖eDisplacementMap锛屽畠浠殑鏍稿績浠ｇ爜锛?svg>filter涓殑鍑犱釜鍙傛暟--baseFrequency,numOctaves,scale鍙樺寲鍏跺疄浼氬緱鍒颁笉鍚岀殑鏁堟灉銆傛垜浠彲浠ュ姩鎬佹敼鍙樺叾涓殑涓€涓垨澶氫釜鏉ュ緱鍒颁笉鍚岀殑鍔ㄧ敾鏁堟灉銆傚姩鎬佹敼鍙榝eDisplacementMap鐨剆cale鍙傛暟feDisplacementMap杩囨护鍣ㄧ敤浜庢敼鍙樺厓绱犲拰鍥惧舰鐨勫儚绱犱綅缃€傝繖涓猣ilter閬嶅巻鍘熷浘鐨勬墍鏈夊儚绱犵偣锛岄€氳繃feTurbulencefilter浜х敓鐨勫櫔澹板嚱鏁板皢鍘熷浘鐨勬瘡涓儚绱犻噸鏂版槧灏勫埌鏂扮殑浣嶇疆锛屽舰鎴愭柊鐨勫浘鍍忋€傛瘮渚嬭〃绀烘柊鑾峰緱鐨勫浘鍍忕殑澶辩湡绋嬪害銆傚€艰秺澶э紝鍥惧儚瓒婃壄鏇插拰鏃犳硶璇嗗埆銆傞€氳繃璁剧疆涓€涓潪甯稿ぇ鐨勫垵濮嬪€硷紝鎴戜滑鍙互瀹屽叏绮掑瓙鍖栦换浣曡緭鍏ユ簮鍥惧儚锛岀湅杩欎釜Demo锛?div> 