鏈€杩慉ntDesign鍦ㄩ」鐩腑杩炴帴姣旇緝棰戠箒锛岃繕鏄緢涓嶉敊鐨勩€備笉鐭ラ亾澶у鏈夋病鏈夊彂鐜拌繖鏍风殑鏁堟灉銆傚湪瀹樼綉涓婏紝濡傛灉榧犳爣鏀惧湪Logo涓婏紝瀛楁瘝i涓婄殑鍥炬爣浼氫笉鏂彉鍖栵紝绂诲紑鍚庡仠姝紝鏀句笂鍘诲啀鍙樸€備篃绠楁槸涓€涓皬褰╄泲鍚э紙鍙兘鏄垜涔嬪墠娌℃壘鍒梆煒傦級锛屾紨绀哄涓嬶細涓嶈繃娌℃壘鍒颁篃涓嶅鎬紝鍥犱负杩欎釜鏁堟灉鏄敤js瀹炵幇鐨勶紝蹇呴』绛夊緟loading瀹屾垚鍚庢墠鑳界敓鏁堬紝瀹樼綉鏈夋椂鍊欎細寰堟參锛屾瘮濡傝繕鍦╨oading鐨勬椂鍊欙紝澶ф鐜囦笉浼氬嚭鐜颁笂闈㈢殑hover鏁堟灉銆傚棷锛屾兂浜嗘兂锛岃繖涓晥鏋滃畬鍏ㄥ彲浠ョ敤绾疌SS鏉ユ悶瀹氥€傚疄鏂芥垚鏈綆锛屽彲鏈夋晥閬垮厤涓婅堪鍔犺浇闂銆傝鎴戜滑鏉ョ湅鐪嬨€備竴銆丆SS瀹炵幇鍘熺悊鏁翠綋瀹炵幇鍘熺悊澶ц嚧濡備笅鍑嗗涓€涓寘鍚墍鏈夊皬鍥炬爣鐨勬潗璐ㄥ垱寤轰竴涓敼鍙樿儗鏅綅缃殑CSS閫愬抚鍔ㄧ敾浣跨敤榧犳爣鎮仠鎺у埗鍔ㄧ敾杩愯浜屻€佹潗璐ㄥ噯澶囦负浜嗛伩鍏嶅娆¤姹傚拰鏂逛究鍒朵綔鍔ㄧ敾锛岃繖閲屽皢鎵€鏈夌殑灏忓浘鏍囩礌鏉愮粍鍚堝湪涓€璧凤紙瀹樼綉淇濆瓨鐨勶級锛屽氨鍍忎箣鍓嶇殑鈥滈洩纰у浘鈥濅竴鏍凤紝鍋囪HTML缁撴瀯鏄繖鏍风殑AntDesign涓轰簡鏇村ソ锛岃繖閲屽缓璁繚鐣欐枃瀛楋紝鐒跺悗鐢ㄥ叾浠栨柟寮忛殣钘忔枃瀛楋紙姣斿閫忔槑锛夛紝鍙互鐢╨ogo鍋氳儗鏅浘锛岀劧鍚庡彉灏忕殑鍥炬爣灏卞彲浠ヤ簡鐢ㄤ吉鍏冪礌鐢熸垚锛堣楗板厓绱犲彲浠ョ敤浼厓绱犵敓鎴愶紝淇濇寔HTML鏁存磥锛夛紝CSS濡備笅銆俵ogo{width:500px;楂樺害锛?00px锛涗綅缃細鐩稿锛涢鑹诧細閫忔槑锛涜儗鏅細url('https://imgservices-1252317822.image.myqcloud.com/image/012420220165011/c0e82c29.svg')center/containno-repeat;cursor:pointer;}.logo::after{content:'';浣嶇疆锛氱粷瀵癸紱瀹藉害锛?2px锛涢珮搴︼細32px锛沚ackground:url('https://imgservices-1252317822.image.myqcloud.com/image/012420220165415/b0005044.svg')0/瑕嗙洊涓嶉噸澶嶏紱瀵圭殑鍚細113px;top:-18px;}璁＄畻闈欐€佸竷灞€銆?.CSS閫愬抚鍔ㄧ敾鍐嶅姩鐢伙紝鍙渶瑕佸湪CSS鍔ㄧ敾鍑芥暟涓娇鐢╯teps()鍑芥暟绗﹀彿鍗冲彲瀹炵幇閫愬抚鍔ㄧ敾鍏堝畾涔変竴涓叧閿抚锛屾敼鍙樿儗鏅綅缃嵆鍙疈鍏抽敭甯ч殢鏈簕鍒皗鑳屾櫙浣嶇疆锛?00%锛泒}涓€鍏辨湁11涓皬鍥炬爣锛岀浉浜掍箣闂村彉鍖?0姝ワ紝鎵€浠ュ姩鐢昏缃涓嬨€俵ogo::after{/*鍏朵粬鏍峰紡*/animation:random1ssteps(10)infinite;}杩欐牱灏卞緱鍒颁簡涓€涓棤闄愬惊鐜殑閫愬抚鍔ㄧ敾銆?銆丆SS鍔ㄧ敾鐨勬殏鍋滃拰杩愯榛樿鎯呭喌涓嬶紝CSS鍔ㄧ敾鏄粯璁よ繍琛岀殑锛屼絾鏄洰鍓嶇殑闇€姹傛槸锛屽彧鏈夊綋榧犳爣鎮仠鏃舵墠浼氱Щ鍔ㄦ湁浜涘鐢熷彲鑳戒細杩欐牱鍋氥€傞粯璁ゆ病鏈夊姩鐢伙紝鎮仠鏃跺垱寤哄姩鐢伙紝濡備笅銆俵ogo::after{/*榛樿娌℃湁鍔ㄧ敾*/}.logo:hover::after{animation:random1ssteps(10)infinite;浣嗘槸杩欑鏂瑰紡浼氬瓨鍦ㄤ袱涓棶棰橈細姣忔瀹炴椂鍒涘缓鍔ㄧ敾锛岄兘浼氭湁杈冨鐨勬€ц兘娑堣€椼€傞紶鏍囨瘡绂诲紑涓€娆★紝浣嶇疆灏变細鎭㈠鍒板垵濮嬬姸鎬併€傚洜姝わ紝杩欑鏂规硶涓嶅彲鍙栥€傞櫎浜嗕笂闈㈢殑鏂规硶锛屽彲浠ユ帶鍒跺姩鐢昏繍琛屼箣澶栵紝杩樺彲浠ラ€氳繃animation-play-state涓诲姩璁剧疆鏆傚仠锛屽涓嬨€俵ogo::after{/*鍏朵粬鏍峰紡*/animation:random1ssteps(10)infinite;鍔ㄧ敾鎾斁鐘舵€侊細鏆傚仠锛?*AnimationPause*/}鍦ㄦ涔嬪悗锛屽畠榛樿涓嶄細绉诲姩锛岀劧鍚庡湪鎮仠鏃垛€滆繍琛屸€濄€傚窘鏍囷細鎮仠::涔嬪悗{鍔ㄧ敾鎾斁鐘舵€侊細杩愯锛?*鍔ㄧ敾杩愯*/}鏁堟灉濡備笅锛屾寚瀹氬垵濮嬩綅缃幇鍦ㄥ皬鍥炬爣榛樿鏄涓€涓€傚鏋滆鎸囧畾鍙︿竴绉嶏紝姣斿鉂ゅ浣曞鐞嗚繖绉嶆儏鍐碉紵棣栧厛锛屾垜浠涓烘垜浠彲浠ユ墜鍔ㄦ洿鏀硅儗鏅綅缃€傗潳鏄8涓紝so.logo::after{/*鍏朵粬鏍峰紡*/background-position:-224px;/*32*7*/}鏁堟灉濡備笅锛岄棶棰樻瘮杈冨锛屽洜涓烘敼鍙樹簡鍔ㄧ敾鐨勮捣濮嬩綅缃紝鍔ㄧ敾浠庣8澶勭Щ鍔ㄥ埌鏈€鍙宠竟锛屽乏杈规病鏈夎繃鍘伙紝鑰屾楠や篃闇€瑕侀噸鏂拌皟鏁淬€傞櫎浜嗚繖绉嶆柟娉曪紝杩樺彲浠ラ€氳繃鍔ㄧ敾鐨勨€滆礋寤惰繜鈥濇潵瀹炵幇銆傜粰鍔ㄧ敾鍔犱笂璐熷欢杩熷悗锛屽姩鐢讳細鎻愬墠绉诲姩鍒版湭鏉ョ殑浣嶇疆銆傛瘮濡備互鍚庤鎸囧畾绗?甯х殑浣嶇疆锛屽彲浠ュ欢杩?/10鐨勮礋杩愬姩鎬绘椂闂达紝濡備笅銆俵ogo::after{/*鍏朵粬鏍峰紡*/animation-delay:-.7绉掞紱/*7/10*1s*/}杩欐牱涓嶅奖鍝嶅師鍔ㄧ敾锛屽畬鏁翠唬鐮佸彲浠ュ畬缇庤闂細AntDesignLogo(codepen.io)闄勪笂瀹屾暣浠ｇ爜锛坈odepen鏈€杩戝ソ鍍忎笉绋冲畾).logo{瀹藉害锛?00px;楂樺害锛?00px锛涗綅缃細鐩稿锛涢鑹诧細閫忔槑锛涜儗鏅細url('https://imgservices-1252317822.image.myqcloud.com/image/012420220165011/c0e82c29.svg')center/containno-repeat;cursor:pointer;}.logo::after{鍐呭锛?';浣嶇疆锛氱粷瀵癸紱瀹藉害锛?2px锛涢珮搴︼細32px锛涜儗鏅細url('https://imgservices-1252317822.image.myqcloud.com/image/012420220165415/b0005044.svg')0/瑕嗙洊涓嶉噸澶嶏紱鍙筹細113px锛涢《閮細-18px锛涘姩鐢伙細闅忔満1s-.7ssteps(10)infinite;鍔ㄧ敾鎾斁鐘舵€侊細鏆傚仠锛泒.logo锛歨over::after{鍔ㄧ敾鎾斁鐘舵€侊細杩愯锛泒@keyframes闅忔満{鍒皗鑳屾櫙浣嶇疆锛?00%锛泒}5.鎬荤粨涓庤鏄庝互涓婃槸AntDesign瀹樼綉Logo鏁堟灉鐨凜SS瀹炵幇锛屼唬鐮侀噺闈炲父灏戯紝涔熼伩鍏嶄簡js鏈姞杞藉畬鎴愮殑闂锛屼綋楠屾洿濂?绠€鍗曟€荤粨涓€涓婥SS娓叉煋鏄強鏃剁殑銆傚彧瑕侀〉闈㈠彲瑙侊紝灏变笉浼氬奖鍝岰SS浜や簰銆傞€愬抚鍔ㄧ敾鍙互閫氳繃CSS鍔ㄧ敾涓殑step()鍑芥暟瀹炵幇浜咰SS鍔ㄧ敾鍙互鑷姩杩愯锛屼篃鍙互鎵嬪姩鏆傚仠銆傞€氳繃璁剧疆璐熷欢杩燂紝CSS鍔ㄧ敾鍙互鎻愬墠杩愯銆俢rash鏄€氳繃涓嶆柇鏀瑰彉svg閾炬帴瀹炵幇鐨勩€傚鏋滀竴鐩存斁鍦↙ogo涓婏紝浼氫笉鏂殑璇锋眰鍥剧墖锛屽皬鍥炬爣涔熶細鍑虹幇鈥滈棯鐑佲€濄€傝繖涓姹傞噺鏈夌偣鎯婁汉銆傛湅鍙嬩滑鐪嬪埌浜嗭紝鑳戒紭鍖栦竴涓嬪悧锛熸渶鍚庯紝濡傛灉瑙夊緱瀵逛綘鏈夊府鍔╋紝璇风偣璧炪€佹敹钘忋€佽浆鍙戔潳鉂も潳
