娆㈣繋鏉ュ埌鎴戠殑鍏紬鍙凤細鍓嶇渚︽帰骞虫椂鍋氭椂閽燂紝鑲畾绂讳笉寮€JS瀹氭椂鍣ㄣ€備粖澶╂崲涓€濊矾锛岀敤CSS瀹炵幇涓€涓椂閽燂紝濡備笅锛氫篃鍙互璁块棶杩欎釜CSS鏃堕棿锛坈odepen.io锛夌湅鐪嬪疄闄呮晥鏋溿€傚綋鐒讹紝鐢ㄤ簡涓€鐐笿S鏉ュ垵濮嬪寲鏃堕棿銆傛暣涓椂閽熸搷浣滈兘鏄敱CSS瀹屾垚鐨勶紝杩樻湁寰堝浣犲彲鑳戒笉鐭ラ亾鐨則ricks锛屼竴璧锋潵鐪嬬湅鍚с€?.鏁板瓧鐨勮浆鎹㈤鍏堬紝璁╂垜浠湅鐪嬫暟瀛楁槸濡備綍杞崲鐨勩€備互鍓嶅鏋滆瀹炵幇鏁板瓧鐨勫閲忓彉鍖栵紝鍙兘闇€瑕佹彁鍓嶅噯澶囧ソ杩欎簺鏁板瓧锛屾瘮濡傚儚杩欐牱12...59鐒跺悗閫氳繃鏀瑰彉浣嶇Щ鏉ュ疄鐜般€備笉杩囩幇鍦ㄦ湁涓€绉嶆洿绠€娲佺殑瀹炵幇鏂瑰紡锛岄偅灏辨槸CSS@property銆備笉鐭ラ亾鐨勫彲浠ュ弬鑰冭繖绡囨枃绔狅細CSS@property锛屽寲涓嶅彲鑳戒负鍙兘銆傝繖涓槸鏉ュ仛浠€涔堢殑锛熺畝鑰岃█涔嬶紝鎮ㄥ彲浠ヨ嚜瀹氫箟灞炴€с€傚湪姝ょず渚嬩腑锛屾偍鍙互浣挎暟瀛楀儚棰滆壊涓€鏍疯繃娓″拰鍔ㄧ敾銆備綘鍙兘涓嶆槑鐧姐€傜湅鐪嬭繖涓緥瀛愩€傚亣璁綡TML鏄繖鏍风殑鎴戜滑璁╄繖涓嚜瀹氫箟鍙橀噺鏄剧ず鍦ㄩ〉闈笂銆傜畝鍗曞唴瀹逛笉鑳界洿鎺ユ樉绀鸿嚜瀹氫箟鍙橀噺锛岄渶瑕佸畾鏃跺櫒銆傛湁鍏磋叮鐨勫彲浠ュ弬鑰冭繖绡囨枃绔狅細Tips:濡備綍浣跨敤content灞炴€ф樉绀篊SSvar鍙橀噺鍊約pan::after{counter-reset:numvar(--num);content:counter(num);}鐒跺悗锛屼綘鍙互閫氳繃:hoverspan:hover::after{--num:59}寰堢洿鐧界殑鎶婅繖涓暟鏀规垚0鍒?9锛屽緢甯歌銆傚鏋滀娇鐢–SS灞炴€э紝鎯呭喌灏变笉鍚屼簡銆傞渶瑕佷慨鏀圭殑鍦版柟寰堝皯銆傚厛瀹氫箟--h锛岀劧鍚庣粰杩欎釜鍙橀噺涓€涓繃娓℃椂闂达紝濡備笅@property--h{syntax:'';缁ф壙锛氬亣鐨勶紱initial-value:0;}span::after{transition:1s--num;}涓嶅彲鎬濊锛岀濂囩殑涓€骞曞彂鐢熶簡锛熷彲浠ヨ繖鏍风悊瑙ｏ紝琚獲property瀹氫箟鍚庯紝鍙橀噺鏈韩鍙互鐙珛璁剧疆transition锛岃€屼笉鏄緷璧栦簬涓€浜涘彧鏀寔transition鐨勫睘鎬э紙color锛寃idth绛夛級銆傜敋鑷冲彲浠ユ坊鍔犲姩鐢伙紝闇€瑕佷娇鐢╯teps鏂规硶锛岃缃姩鐢诲惊鐜负鏃犻檺锛屽涓婡keyframesnum{to{--num:10}}span{animation:num1sinfinitesteps(10);}鏃堕挓鐨勫熀鏈搷浣滃師鐞嗘槸杩欐牱鐨勶紝涓€涓棤闄愬惊鐜殑CSS鍔ㄧ敾锛?.鏃躲€佸垎銆佺鎴戜滑鏉ョ湅鍏蜂綋鐨勬椂銆佸垎銆佺鐨勫疄鐜般€侶TML濡備笅::
