鏈枃灏嗚瑙ｅ浣曞阀濡欏湴鍒╃敤鑳屾櫙绯诲垪灞炴€ф潵瀹炵幇涓€浜涜姳鍝ㄧ殑鏂囧瓧鏁堟灉銆傞€氳繃鏈枃锛屾偍灏嗚兘澶熷鍒帮細浣跨敤background-size鍜宐ackground-position瀹炵幇鐐叿鐨勬枃瀛椾笅鍒掔嚎鏁堟灉浣跨敤background-size銆乥ackground-position鍜宐ackground-clip閫氳繃animation-delay瀹炵幇鏂囧瓧閫愭笎鍑虹幇鐨勬晥鏋滄贰鍏ユ晥鏋滅殑鎴愬洜鍐欒繖绡囨枃绔犵殑鍔ㄦ満鏄紝鏈変竴澶╋紝鎴戣杩欐牱涓€涓爣棰樻墍鍚稿紩鈥斺€?0MasterfullyDesignedWebsites锛屽叾涓垪鍑轰簡10涓瀬鍏峰垱鎰忕殑缃戠珯銆俁edBullRacing缃戠珯涔嬩竴鏄粙缁岶1RedBullRacing杞﹂槦鐨勪富椤点€傛湁杩欐牱涓€涓潪甯告湁瓒ｇ殑Hover鍔ㄧ敾鏁堟灉锛氳繖娈垫枃瀛楃殑hover鏁堟灉鐪嬩技绠€鍗曪紝浣嗗疄闄呬笂浠呬粎渚濋潬CSS鏉ュ畬鍏ㄥ疄鐜板畠鏄潪甯稿鏉傜殑銆傛瘮杈冨洶闅剧殑閮ㄥ垎涔嬩竴鏄€斺€斿浣曞埗浣滄晥鏋滐紝閫愭笎灏嗘晥鏋滃簲鐢ㄤ簬鏁翠釜鏂囨湰鐨勯儴鍒嗭紝鑰屼笉鏄皢鏁翠釜鏁堟灉涓€娆″簲鐢ㄤ簬鏁翠釜鏂囨湰銆傚埄鐢ㄨ儗鏅潵瀹炵幇鏂囧瓧鐨勪笅鍒掔嚎鏁堟灉鑷虫锛屾垜鎯冲埌浜嗘垜鍦ㄨ繖绡囨枃绔犱腑浠嬬粛鐨勬晥鏋溾€斺€擟SS鏂囧瓧瑁呴グtext-decoration&text-emphasis锛屽畠鍒╃敤鑳屾櫙鏉ユā鎷熶笅鍒掔嚎鏁堟灉銆傜湅涓€涓畝鍗曠殑DEMO锛岀敤鑳屾櫙妯℃嫙鏂囧瓧鐨勪笅鍒掔嚎鏁堟灉锛?p>Loremipsumdolorsitametconsecteturadipisicingelit銆?a>Mollitianostrumplaceatconsequaturdeseruntvelitducimuspossimuscommoditemporibusdebitisquam,molestiaelaboriosamsitrepellsedsapientequidemquodaccusantiumv鈥嬧€媏ro.
p{瀹藉害锛?00px;瀛椾綋澶у皬锛?4px锛涢鑹诧細#666锛泒a{鑳屾櫙锛氱嚎鎬ф笎鍙橈紙90deg锛?0cc锛?0cc锛夛紱100%3鍍忕礌锛涜儗鏅噸澶嶏細涓嶉噸澶嶏紱鑳屾櫙浣嶇疆锛?00%100%锛沜olor:#0cc;}鐢ㄨ儗鏅ā鎷熸枃瀛椾笅鍒掔嚎鏁堟灉锛屾晥鏋滃浘濡備笅锛氭垨鑰咃紝鐢ㄨ儗鏅ā鎷熻櫄绾夸笅鍒掔嚎锛歛{background:linear-gradient(90deg,#0cc50%,閫忔槑50%,閫忔槑1px);鑳屾櫙澶у皬锛?0px2px锛涜儗鏅噸澶嶏細閲嶅-x锛沚ackground-position:100%100%;}CodePenDemo--浣跨敤鑳屾櫙妯℃嫙涓嬪垝绾垮拰铏氫笅鍒掔嚎銆傚綋鐒讹紝杩欐槸鏈€鍩烘湰鐨勩€傛垜浠彲浠ュ阀濡欏湴鍒╃敤鑳屾櫙鐨勫悇绉嶅睘鎬ф潵瀹炵幇鍚勭鏈夎叮鐨勬晥鏋溿€傚阀濡欐敼鍙榖ackground-size鍜宐ackground-position瀹炵幇鏂囧瓧鎮仠鏁堟灉杩欓噷锛岄€氳繃宸у鏀瑰彉background-size鍜宐ackground-position灞炴€э紝鎴戜滑鍙互瀹炵幇涓€浜涢潪甯告湁瓒ｇ殑鏂囧瓧鎮仠鏁堟灉銆傚厛鐪嬭繖鏍蜂竴涓猟emo锛屾牳蹇冧唬鐮佷綔鐢ㄤ簬琚?p>鏍囩鍖呰９鐨?a>鏍囩锛?p>Loremipsumdolorsitametconsecteturadipisicingelit銆?a>Mollitianostrumplaceatconsequaturdesertvelitducimuscommoditemporibusdebitisquam锛宮olestiaelaboriosamsitrepellendussedsapientequidemquodaccusantiumv鈥嬧€媏ro.a{鑳屾櫙锛氱嚎鎬ф搴︼紙90deg锛?ff3c41锛?fc0,#0ebeff);鑳屾櫙澶у皬锛?3px锛涜儗鏅噸澶嶏細涓嶉噸澶嶏紱鑳屾櫙浣嶇疆锛?100%锛涜繃娓★細鍏ㄩ儴涓?锛涢鑹诧細#0cc;}a:hover{鑳屾櫙澶у皬锛?00%3px;color:#000;}铏界劧鎴戜滑璁剧疆浜嗚儗鏅細linear-gradient(90deg,#ff3c41,#fc0,#0ebeff)锛屼絾鏄畠榛樿鐨刡ackground-size:03px寮€澶达紝涔熷氨鏄笅鍒掔嚎澶勭湅涓嶅埌涓€寮€濮嬶紝鍦ㄦ偓鍋滅殑鏃跺€欙紝鏀瑰彉background-size:100%3px锛岃繖鏃跺€欎細鍑虹幇浠?3px鍒?00%3px鐨勫彉鎹紝杩欐槸浠庡ご寮€濮嬬殑鎷変几鏁堟灉銆傜湅鏈€缁堟晥鏋滐細鐢变簬璁剧疆鐨刡ackground-position涓?100%锛屽鏋滆缃殑background-position涓?00%100%锛屾垜浠彲浠ュ緱鍒扮浉鍙嶇殑鏁堟灉锛?/鍏朵粬涓嶅彉锛屽彧鏀瑰彉background-position锛屼粠0100%鍙樹负100%100%a{...鑳屾櫙浣嶇疆锛?00%100%锛?..}鍐嶇湅鐪嬫晥鏋滐紝鍙互瀵规瘮涓€涓嬩笂闈㈢殑鍔ㄧ敾锛岀湅鐪嬪叿浣撳尯鍒湪鍝噷锛欳odePenDemo--鑳屾櫙涓嬪垝绾垮姩鐢籓K锛屽鏋滄垜浠敤鑳屾櫙瀹炵幇涓ゆ潯閲嶅彔鐨勪笅鍒掔嚎锛岀劧鍚庝娇鐢ㄤ笂闈袱涓笉鍚岀殑background-position鍊硷紝鎴戜滑鍙互寰楀埌涓€涓洿鏈夎叮鐨勪笅鍒掔嚎鎮仠鏁堟灉銆侰SS浠ｇ爜鏄剧ずbackground妯℃嫙鐨勪袱鏉′笅鍒掔嚎鐨刡ackground-position鐨勫€间笉鍚岋細a{background:linear-gradient(90deg,#0cc,#0cc),linear-gradient(90deg,#ff3c41,#fc0,#8500d8);鑳屾櫙澶у皬锛?00%3px锛?3px锛涜儗鏅噸澶嶏細涓嶉噸澶嶏紱鑳屾櫙浣嶇疆锛?00%100%锛?100%锛涜繃娓★細鍏ㄩ儴0.5s锛涢鑹诧細#0cc锛泒a:hover{鑳屾櫙澶у皬:03px,100%3px;color:#000;}鍙互寰楀埌杩欐牱鐨勬晥鏋滐紝鍏跺疄姣忔鎮仠锛岄兘鏈変袱鏉′笅鍒掔嚎鍦ㄧЩ鍔細CodePenDemo--鑳屾櫙涓嬪垝绾垮姩鐢婚€氳繃background-size鍜宐ackground-position閰嶅悎background-clip瀹炵幇鏂囧瓧娣″叆.涓婅堪澶ф鐢?-涓嬪垝绾垮寘鍥淬€傚洖鍒版湰鏂囧紑澶存彁鍒扮殑Gif鏁堟灉锛屾垜浠兘鍚﹀湪涓€娈垫枃瀛椾腑瀹炵幇鏂囧瓧鐨勬贰鍏ユ晥鏋滃憿锛熶笂闈㈢殑鎶€宸х敤鍒颁簡鑳屾櫙锛岄偅涔堣儗鏅壊鑳戒笉鑳芥敼鍙樻枃瀛楃殑棰滆壊鍛紵绛旀鏄偗瀹氱殑锛屽氨鐢╞ackground-clip銆傛垜浠◢寰慨鏀逛竴涓嬩唬鐮侊紝瀹炵幇浣跨敤background-clip瀹炵幇hover鏃讹紝閮ㄥ垎鏂囧瓧閫愭笎鍙樿壊锛?p>Loremipsumdolorsitametconsecteturadipisicingelit銆?a>Mollitianostrumplaceatconsequaturdesertvelitducimuscommoditemporibusdebitisquam锛?/a>molestiaelaboriosamsitrepellendussedsapientequidemquodaccusantiumv鈥嬧€媏ro銆?/p>p{color:#666;cursor:pointer;}a{background:linear-gradient(90deg,#fc0,#fc0);鑳屾櫙澶у皬锛?100px锛涜儗鏅噸澶嶏細涓嶉噸澶嶏紱鑳屾櫙浣嶇疆锛?100%锛涜儗鏅壀杈戯細鏂囨湰锛泃ransition:.6salllinear;}p:hovera{background-size:100%100%;transparent;}鐪嬫晥鏋滐紝閫氳繃background-clip:text鐨勯伄缃╄鍓紝鎴戜滑缁欐枃瀛楀簲鐢╞ackground:linear-gradient(90deg,#fc0,#fc0)鐨勮儗鏅壊锛屼娇鐢╟olor:transparent鏉ュ埗浣滄枃瀛楁樉绀鸿儗鏅壊鐨勯鑹插€硷細CodePenDemo--background-size,background-position鍜宐ackground-clip瀹炵幇鏂囧瓧娓愬彉娓愭樉褰撶劧锛屾垜浠彲浠ラ€氳繃瀵逛笂闈㈢殑浠ｇ爜绋嶅井鍙樺舰涓€涓嬶紝婕斿寲鍑哄嚑绉嶄笉鍚岀殑鏁堟灉銆傚疄鐜版暣涓枃瀛楃殑娓愬彉鍛堢幇鈥斺€斾粠閫忔槑鍒板憟鐜伴鍏堟槸浠庨€忔槑鍒版湁鑹诧紝閫愭笎鍛堢幇銆傝繖閲屾垜浠彧闇€瑕佷繚鎸侀鑹查€忔槑鍗冲彲锛堜互涓嬫晥鏋滀娇鐢ㄦ寜閽Е鍙戞晥鏋滐級锛?divclass="button">Button