浠婂ぉ鍋剁劧鐪嬪埌杩欎箞涓€涓湁瓒ｇ殑鏂囧瓧闂姩鏁堟灉锛氳繖绉嶆枃瀛楅棯鍔ㄦ晥鏋滃鏋滆繍鐢ㄥ緱褰擄紝鏇磋兘鍚稿紩鐢ㄦ埛鐪肩悆銆傚綋鐒讹紝浠婂ぉ骞朵笉鏄墦绠楃敤CSS鏉ュ疄鐜颁笂闈㈢殑鏁堟灉銆傚湪瀹為獙鐨勮繃绋嬩腑锛屾垜鍙戠幇浜嗗彟涓€绉嶅彲浠ュ緢鏂逛究鐨勪娇鐢–SS瀹炵幇鏂囧瓧flash鍔ㄧ敾锛屽埄鐢╞lur()婊ら暅鍜宑ontrast()婊ら暅浜х敓鐨勮瀺鍚堟晥鏋滐紝绫讳技杩欐牱锛氳繖涓妧宸т篃鍙互鍦ㄥ緢澶氬湪绗竴绡囨枃绔犱腑閮芥湁鎻愬埌锛屾湰鏂囧氨绠€鍗曚粙缁嶄竴涓嬨€傛ā绯婃护闀滀笌瀵规瘮婊ら暅娣峰悎浜х敓铻嶅悎鏁堟灉鏈枃閲嶇偣浠嬬粛妯＄硦婊ら暅涓庡姣旀护闀滃彔鍔犱骇鐢熺殑铻嶅悎鏁堟灉銆傚垎鍒彇鍑轰袱涓护闀滐紝瀹冧滑鐨勪綔鐢ㄦ槸锛歠ilter:blur()锛氱粰鍥惧儚璁剧疆楂樻柉妯＄硦鏁堟灉銆俧ilter:contrast()锛氳皟鏁村浘鍍忕殑瀵规瘮搴︺€傜劧鑰岋紝褰撳畠浠€滃悎浣撯€濇椂锛屽嵈鍙戠敓浜嗗濡欑殑铻嶅悎鐜拌薄銆傛垜浠潵鐪嬩竴涓畝鍗曠殑渚嬪瓙锛欳odePenDemo--filtermixbetweenblurandcontrast浠旂粏鐪嬩袱涓渾鐩镐氦鐨勮繃绋嬨€傚綋杈圭紭鐩镐簰鎺ヨЕ鏃讹紝浼氫骇鐢熻竟鐣岃瀺鍚堟晥鏋滐紝浣跨敤contrastfilter灏嗛珮鏂ā绯婂幓鎺夋ā绯婄殑杈圭紭锛屼娇鐢ㄩ珮鏂ā绯婅揪鍒拌瀺鍚堟晥鏋溿€備笂闈㈡晥鏋滅殑瀹炵幇鍩轰簬涓ょ偣锛氬浘褰㈠湪canvas鑳屾櫙涓婂姩鐢昏缃甪ilter:contrast()锛屽姩鐢诲浘褰㈣缃甪ilter:blur()锛堝姩鐢诲浘褰㈢殑鐖跺厓绱犻渶瑕乻etfilter:contrast()canvas)褰撶劧鑳屾櫙鑹蹭笉涓€瀹氭槸鐧借壊鐨勶紝鎴戜滑瀵逛笂闈㈢殑Demo绋嶄綔淇敼锛岀畝鍗曠ず鎰忓浘濡備笅锛氫娇鐢╞lur/contrastfilter瀹炵幇鏂囧瓧鍒囨崲鍒╃敤涓婇潰鐨勬妧宸э紝鎴戜滑鍙互瀹炵幇鏂囧瓧铻嶅悎鏁堟灉锛屽儚杩欐牱锛欳odePenDemo--鏂囧瓧鍔ㄧ敾|wordfilter杩欐牱锛屽埄鐢ㄨ繖涓妧宸э紝鎴戜滑鍙互宸у鏋勬€濆嚭鍔ㄧ敾锛氬涓崟璇嶄緷娆″嚭鐜帮紙鍒╃敤animation-delay杩涜鎺у埗澶勭悊锛夛紝瀹炵幇涓婁竴涓崟璇嶆秷澶辩殑鍚屾椂锛屼笅涓€涓枃鏈細鍑虹幇锛屽苟涓庝笂闈㈢殑杩囨护鍣ㄥ彔鍔?鏍稿績浠ｇ爜濡備笅锛?divclass="g-container">
