鏈€杩戞湁鍚屽闂浣曠敤CSS瀹炵幇濡備笅鏁堟灉锛氱湅璧锋潵寰堟湁瓒ｇ殑鍔ㄧ敾銆備粩缁嗘兂鎯筹紝瑕佽揪鍒拌繖绉嶆晥鏋滐紝鏍稿績灞炴€у彧鏈変竴涓€斺€攂ackground-clip锛歵ext銆傛湁瓒ｇ殑background-clip:textbackground-clip:text涔嬪墠涔熸彁鍒拌繃寰堝娆°€傚叾鏍稿績鏄皢鍧楀唴鐨勬枃瀛椾綔涓鸿鍓尯鍩熷悜澶栬鍓紝鏂囨湰鐨勮儗鏅负鍧楃殑鑳屾櫙锛屾枃鏈互澶栫殑鍖哄煙灏嗚瑁佸壀銆傜畝鍗曟潵璇村氨鏄娇鐢ㄤ簡background-clip:text鍏冪礌锛岃儗鏅唴瀹瑰彧淇濈暀鏂囧瓧鎵€鍦ㄧ殑鍖哄煙銆傚甫閫忔槑鏂囧瓧棰滆壊锛氶€忔槑锛屾枃瀛楀彲鐢ㄦ潵鏄鹃湶鑳屾櫙銆備娇鐢╞ackground-clip:text锛屽彲浠ュ緱鍒板緢澶氶潪甯告湁瓒ｇ殑鏂囧瓧鏁堟灉銆傚亣璁炬垜浠湁杩欐牱涓€涓狦if鍥剧墖锛氭垜浠彲浠ョ敤杩欎釜鍔ㄧ敾鍜屾枃瀛楁潵瀹炵幇涓€涓枃瀛楃増鐨勫姩鐢伙細
Lorem......
p{color:transparent;鑳屾櫙锛氱綉鍧€锛坔ttps://media.giphy.com/media/Ju7l5y9osyymQ/giphy.gif锛変腑蹇?灏侀潰锛沚ackground-clip:text;}鎴戜滑瀹炵幇浜嗚繖鏍蜂竴涓晥鏋滐細Interesting,CodePenDemo--RickRollKnockout浠ヤ笂Text鐨勬晥鏋滃拰鎬濊矾鍙互搴旂敤鍒板垵濮嬫晥鏋滐細瀹炵幇涓€涓儗鏅姩鐢汇€傚皢榧犳爣鎮仠鍦ㄦ枃鏈笂鏃讹紝浣挎枃鏈€忔槑骞惰鍔ㄧ敾寮€濮嬨€傛垜浠鍏堥渶瑕佸疄鐜颁竴涓Щ鍔ㄧ殑鏉＄汗鑳屾櫙鍔ㄧ敾銆傛湁寰堝鏂规硶銆傛垜浼氬湪杩欓噷浣跨敤瀹冦€傛坊鍔犱簡甯︽湁CSS@property鐨勯噸澶嶅緞鍚戞笎鍙橈細@property--offset{syntax:'鍏冪礌鐨勮儗鏅細鏈変簡绉诲姩鏁堟灉鍚庯紝鎴戜滑绋嶅井淇敼涓€涓嬩唬鐮侊紝浣跨敤background-clip:text锛岀粨鍚?p>鍏冪礌鐨勬偓鍋滄晥鏋滐紝鎮仠鏃讹紝璁剧疆#000鍒伴€忔槑鐨勬枃瀛楅€忔槑锛?..p{棰滆壊锛?000锛?:hover{棰滆壊锛氶€忔槑锛涜儗鏅細閲嶅寰勫悜娓愬彉锛堝湪00澶勭敾鍦嗭紝#000calc锛坴ar锛?-offset锛?5px锛夛紝#000var锛?-offset锛夛紝#fffvar锛?-offset锛夛紝#fffcalc锛坴ar(--鍋忕Щ閲?+5px));鑳屾櫙鍓緫锛氭枃鏈紱鍔ㄧ敾锛氱Щ鍔?5s鏃犻檺绾挎€э紱}}...杩欐牱锛屾垜浠氨鎴愬姛寰楀埌浜嗗棰樺浘鎵€绀虹殑鏁堟灉锛欳odePenDemo--BackgroundClipWaveText缁撳悎婊ら暅鍜屾贩鍚堟ā寮忥紝纰版挒鍑轰笉鍚岀殑鐏姳锛岀粨鏉熶簡鍚楋紵涓嶏紒鏈変簡浠ヤ笂鐨勯摵鍨紝鎴戜滑缁х画鍋氳繘涓€姝ョ殑灏濊瘯銆侰SS鏈変袱涓緢鏈夋剰鎬濈殑灞炴€э紝杩囨护鍣╢ilter鍜屾贩鍚堟ā寮弇ix-blend-mode銆傛垜浠€冭檻鍦ㄦ垜浠殑鏁堟灉涓娇鐢ㄥ畠浠€傝繕鏄繖寮燝if鍥撅細鎴戜滑鍏堥€氳繃婊ら暅filter灏嗗畠浠庡僵鑹插鐞嗘垚榛戠櫧鐏帮細grayscale(1):p{background:url(xxx);filter:grayscale(1);}澶勭悊鍚庣殑鍥剧墖澶ф浼氭槸杩欐牱鐨勶細鍦ㄤ竴寮犻粦鐧借儗鏅浘鐗囩殑鍩虹涓婏紝鎴戜滑鍐嶄娇鐢╞ackground-clip:text锛屽啀浣跨敤blendmodemix-blend-mode:hard-鍏夛紝鑰屼笖锛岄潪甯搁噸瑕佺殑鏄紝鎴戜滑浣跨敤杩欎釜鏁堟灉鎶婂畠鏀惧湪榛戣壊鑳屾櫙涓婏細body{background:#000;}p{color:transparent;鑳屾櫙锛歶rl(xxx)涓績/灏侀潰锛涜儗鏅壀杈戯細鏂囨湰锛涜繃婊ゅ櫒锛氱伆搴︼紙1锛夛紱mix-blend-mode:hard-light;}浼氬緱鍒拌繖鏍风濂囩殑鏁堟灉锛岄€氳繃娣峰悎妯″紡鐨勫彔鍔犲鐞嗭紝淇濈暀鏂囧瓧浜儴锛屾殫閮ㄤ笌榛戣壊鑳屾櫙铻嶅悎锛氳繖閲屻€佹贩鍚堟ā寮弇ix-blend-mode锛歨ard-light璧风潃闈炲父閲嶈鐨勪綔鐢ㄣ€傚鏋滃幓鎺夛紝鏄繖鏍风殑缁撴灉锛氬綋鐒讹紝鎴戜滑鏇村笇鏈涚殑鏄汉鐨勯儴鍒嗕繚鐣欎笅鏉ワ紝gif鍥剧殑鑳屾櫙閮ㄥ垎闅愯棌璧锋潵锛屽畬缇庯紒杩欓噷锛屾垜浠户缁紭鍖栦唬鐮併€傛垜浠笇鏈涘皢缁忚繃grayscale()澶勭悊鍚庣殑鍘熷浘鐨勬槑鏆楅儴鍒嗘浛鎹㈡帀銆傛伆濂藉湪filter涓紝鏈変竴涓猧nvert()鍑芥暟锛屽彲浠ュ皢杈撳叆鍥惧儚鐨勯鑹插€艰繘琛屽弽杞€傚洜姝わ紝鍦╣rayscale()涔嬪悗锛屽啀娆′娇鐢╥nvert(1)鍑芥暟锛歜ody{background:#000;}p{color:transparent;鑳屾櫙锛歶rl(xxx)涓績/灏侀潰锛涜儗鏅壀杈戯細鏂囨湰锛涜繃婊ゅ櫒锛氱伆搴︼紙1锛夊弽杞紙1锛夛紱mix-blend-mode:hard-light;}OK锛岃嚦姝わ紝鎴戜滑鐢ㄧ函CSS瀹炵幇浜嗚繖涔堢墰閫肩殑鏂囧瓧鏁堟灉锛欳odePenDemo-Filter&MixBlendMode&BackgroundClipTextAnimationEffect灏辩敤鍒颁簡杩欎釜鎶€宸э紝鍙鏈夌礌鏉愶紝鎴戜滑鍙互灏芥儏鍙戞尌鎴戜滑鐨勬兂璞″姏锛屽疄鐜板悇绉嶇浉浼兼湁瓒ｇ殑鏁堟灉銆傛渶鍚庯紝鏈枃鍒版缁撴潫锛屽笇鏈涘浣犳湁鎵€甯姪:)鎯宠鑾峰彇鏈€鏈夎叮鐨凜SS璧勮锛屽崈涓囦笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇濂囬椈杞朵簨馃槃鏇村绮惧僵CSS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屾寔缁洿鏂帮紝娆㈣繋鐐逛釜鏄熻闃呮敹钘忋€傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>