CSS技巧和污言秽语-使用混合模式实现文字镂空波浪效果

鏍稿績CSS浼唬鐮佸涓嬶細p{鑳屾櫙锛?fff锛涢鑹诧細#000锛?::before,&::after{鍐呭锛氣€溾€濓紱浣嶇疆锛氱粷瀵癸紱杈圭晫鍗婂緞锛?5%48%43%47%锛涜儗鏅細rgba锛?銆?69銆?44銆?85锛夛紱鍔ㄧ敾锛氭棆杞?0s鏃犻檺绾挎€э紱}&::after{杈圭晫鍗婂緞锛?3%47%44%48%锛涘姩鐢伙細鏃嬭浆10s鏃犻檺.5s绾挎€э紱}}@keyframesrotate{0%{transform:translate(-50%,-50%)rotate(0);}100%{鍙樻崲锛氬钩绉?-50%,-50%)鏃嬭浆(360deg);}}鏁堟灉澶ф鏄繖鏍风殑锛氬綋鐒舵垜浠篃鍙互鎶婂畠鏀惧湪鏂囧瓧灞備笅闈紝鏇寸洿瑙傦細p{...&::before,&::after{...+z-index:-1;鍝︼紝澶碂绯曚簡锛屽彧鏈夎繖涓疄鐜颁笉浜嗏€斺€斿彧鏈夋枃瀛楄鎸栫┖锛屾枃瀛楀唴閮ㄦ湁娉㈡氮鏁堟灉銆傚皾璇曚娇鏂囨湰閫忔槑銆傛垜浠兂灏濊瘯浣挎枃鏈€忔槑銆傛偍鍙互浣跨敤color:transparent浣挎枃鏈€忔槑銆傚皾璇曚娇鐢╞ackground-clip瀹炵幇emmm锛屼竴涓€灏濊瘯銆傚鏋滃瓧浣撹缃负閫忔槑锛岀敱浜?p>璁剧疆浜嗙櫧鑹茶儗鏅壊锛屽瓧浣撻鑹蹭篃浼氬彉鎴愮櫧鑹层€傛暣浣撴槸鐧藉浘锛屽け璐ャ€傚鏋滆儗鏅缃负榛戣壊骞朵笖璁剧疆浜哹ackground-clip:text鎬庝箞鍔烇紵瀛椾綋杩樻槸榛戠殑锛屾尝娴繕鏄繘涓嶅幓绌哄績瀛椾綋~p{+background-clip:text;}灏辫繖鏍峰惂锛氬己澶х殑娣峰悎妯″紡濂藉儚娌℃湁鏁堟灉锛屽彧鑳藉彟杈熻箠寰勪簡銆傚湪CSS涓紝杩樻湁鍏朵粬涓€浜涗笢瑗垮彲浠ュ鐞嗛鑹诧紝涓€涓槸filter婊ら暅锛屼竴涓槸mix-blend-mode銆傚湪杩欓噷锛屽湪澶撮儴闂儊鍚勭杩囨护鍣ㄥ簲璇ヤ笉璧蜂綔鐢ㄣ€備絾鏄贩鍚堟ā寮忥紝浣犲彲浠ヨ瘯璇曘€侰SS涓篃鏈夋贩鍚堟ā寮忥紙mix-blend-mode锛宐ackground-blend-mode锛夈€傛贩鍚堟ā寮忓湪photoshop涓渶甯歌锛屼篃鏄疨S涓渶寮哄ぇ鐨勫姛鑳戒箣涓€銆傚畠鐩墠鍦–SS涓緱鍒板緢濂界殑鏀寔銆傛垜浠皾璇曞湪涓や釜澶у渾鍦堜腑鍔犲叆娣峰悎妯″紡锛屽湪褰撳墠閰嶈壊鏂规涓嬶紝鍗崇櫧搴曢粦瀛楃殑鎯呭喌涓嬶紝杩囨护鎺夌櫧搴曚笅鐨勮摑鑹层€傚搰鍝︼紝鍦ㄧ粰涓や釜娉㈡氮鍦嗗湀鍔犱笂mix-blend-mode:lighten鐨勬椂鍊欙紝钃濊壊鍦ㄧ櫧鑹茶儗鏅笂琚垚鍔熻繃婊ゆ帀浜嗭紝鍙湁鍦ㄩ粦鑹插瓧浣撲笂鎵嶈兘鐪嬪埌钃濊壊娉㈡氮鏁堟灉銆傚綋鐒跺彟涓€绉嶆贩鍚堟ā寮弇ix-blend-mode:screen涔熷彲浠ュ疄鐜扮被浼肩殑鏁堟灉锛氳嚦姝わ紝閫氳繃娣峰悎妯″紡锛屾垜浠阀濡欑殑瀹炵幇浜嗚繖鏍蜂竴涓枃瀛楅晜绌虹殑娉㈡氮鏁堟灉銆傞€氳繃娣峰悎妯″紡鐨勭壒鎬э紝鍦ㄦ晥鏋滀腑杩囨护鎺変竴浜涙垜浠笉鎯崇湅鍒扮殑棰滆壊锛屽彧鏈夋纭殑棰滆壊鍑虹幇鍦ㄦ纭殑鍦版柟銆傚畬鏁翠唬鐮佸彲浠ョ偣鍑伙細CSSInspiration-浣跨敤BlendModeOverlay瀹炵幇鏂囧瓧娉㈡氮鏁堟灉鏈€鍚庯紝鏈枃鍒版缁撴潫锛屽笇鏈涘澶у鏈夋墍甯姪锛氾級鏈枃涓殑涓€浜涚粏鑺傚氨涓嶈禈杩颁簡mix-blend-mode鐨勫熀鏈敤娉曪紝鏈夊叴瓒ｇ殑鍚屽鍙互鑷鐮旂┒銆傛兂瑕佽幏鍙栨渶鏈夎叮鐨凜SS璧勮锛屽崈涓囦笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇瓒ｉ椈馃槃鏇村绮惧僵CSS鐗规晥锛屽彲浠ュ叧娉ㄦ垜鐨凜SS鐏垫劅銆傛洿澶氱簿褰〤SS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屾寔缁洿鏂颁腑锛屾杩庣偣涓槦璁㈤槄鏀惰棌銆傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>