宸у鍒╃敤CSS鍙橀噺瀹炵幇鍔ㄧ敾鍔熻兘鐨勫鐢紝璁╃綉鏍煎姩鐢诲厖婊￠珮绾ф劅CSS鑷畾涔夊彉閲忥紙CSSVariable锛夛紝涔嬪墠涔熷彨CSSCustomAttributes锛岀敤娉曞涓嬶細//澹版槑涓€涓彉閲忥細:root{--bgColor:#000;}杩欓噷鎴戜滑浣跨敤涓婇潰鐨?12锛岀粨鏋勫寲鐨?root{}浼被涓殑浼被鍦ㄥ叏灞€:root{}浼被涓畾涔変簡涓€涓悕涓?-bgColor鐨凜SS鍙橀噺銆傚畾涔夊畬鎴愬悗锛屽氨鍙互浣跨敤浜嗐€傚亣璁炬垜鎯宠缃竴涓猟iv鐨勮儗鏅壊涓洪粦鑹诧細.main{background:var(--bgColor);}杩欓噷锛屾垜浠渶瑕佸湪鍙橀噺浣跨敤鍓嶅畾涔夌殑鍦版柟锛岄€氳繃var(瀹氫箟鐨勫彉閲忓悕)鏉ヨ皟鐢ㄣ€傚湪@keyframes涓娇鐢–SS鍙橀噺OK锛屽洖鍒版垜浠殑涓婚銆傚阀濡欎娇鐢–SS鍙橀噺锛屽疄鐜板姩鐢诲姛鑳藉鐢ㄣ€傚亣璁炬垜浠幇鍦ㄦ湁澶氫釜鍏冪礌锛岄渶瑕佸疄鐜颁竴涓綅绉诲姩鐢伙紝浠嶢浣嶇疆鍒癇浣嶇疆銆侫浣嶇疆鐩稿悓锛孊浣嶇疆涓嶅悓锛屽儚杩欐牱锛氶€氬父鎯呭喌涓嬶紝鍥犱负绔偣涓嶅悓锛屾垜浠彲鑳介渶瑕佸疄鐜?涓笉鍚岀殑@keyframes鍍忚繖鏍凤細
li:nth-child(1){animation:move12slinear;}li:nth-child(2){animation:move22slinear;}li:nth-child(3){animation:move32slinear;}@keyframesmove1{60%,100%{transform:translate(150px);}}@keyframesmove2{60%,100%{transform:translate(120px);}}@keyframesmove3{60%,100%{transform:translate(200px);}}杩欐浠ｇ爜鏈夐棶棰樺悧锛熶笉銆備絾鏄紝鎴戜滑鍙互浣跨敤CSS鍙橀噺浣垮叾鏇寸畝娲併€傝鎴戜滑杞崲涓€涓婡keyframes浠ｇ爜锛屾妸鍥哄畾浣嶇Щ鍊煎彉鎴愪竴涓彉閲忥細@keyframesmove{60%,100%{transform:translate(var(--dis));}}鐢变簬CSS鍙橀噺鏄湁浣滅敤鍩熺殑锛屾垜浠彲浠ラ€氳繃CSS鍙橀噺涓烘瘡涓€涓猯i瀹氫箟涓嶅悓鐨?-dis鍙橀噺锛屽儚杩欐牱锛歭i:nth-child(1){--dis:150px;}li:nth-child(2){--dis:120px;}li:nth-child(3){--dis:200px;}杩欐牱锛岃櫧鐒跺姩鐢荤殑缁堢偣涓嶅悓锛屼絾鏄垜浠娇鐢–SS鍙橀噺鏉ュ鐢ㄧ浉鍚岀殑@keyframes浣滅敤锛氶€氳繃鍐呰仈鏍峰紡灞炴€т紶鍏ヨ嚜瀹氫箟鍙橀噺闄や簡鍦?style>涓紶鍏ヤ笉鍚岀殑鑷畾涔夊彉閲忓锛屾垜浠繕鍙互閫氳繃鍐呰仈鏍峰紡灞炴€т紶鍏ヨ嚜瀹氫箟鍙橀噺銆傝鎴戜滑鍐嶆杞崲鎴戜滑鐨凘keyframes锛欯keyframesmove{60%,100%{transform:translate(var(--end));鑳屾櫙锛歷ar锛?-棰滆壊锛夛紱}}杩欐鎴戜滑涓嶉渶瑕侀€氳繃锛歯th-鈥嬧€媍hild()鏉ヤ慨鏀规瘡涓€涓猯i鐨凜SS锛岃€屾槸閫氳繃HTML鍏冪礌鐨勫唴鑱攕tyle灞炴€э紝鍍忚繖鏍凤細
鏄殑锛屾瘡涓猯i鍏冪礌鐨凘keyframes鍙互璇诲彇姣忎釜li鐨勬牱寮忎腑瀹氫箟鐨勪笉鍚孋SS鍙橀噺銆傝繖鏍凤紝鎴戜滑鍙互寰楀埌濡備笅鏁堟灉锛氬畬鏁翠唬鐮佸彲浠ョ偣鍑昏繖閲岋細CodePenDemo--宸у鍒╃敤CSS鍙橀噺瀹炵幇鍔ㄧ敾鍔熻兘鐨勫鐢ㄥ緢涔呬互鍓嶏紝鎴戜滑瀹炵幇浜嗚繖鏍蜂竴涓姩鐢绘晥鏋滐細杩欎釜鍔ㄧ敾鏁堟灉鐨勫疄鐜版柟娉曟槸锛氱埗鍏冪礌瀹炵幇涓€涓猺otateZ(360deg)鐨勫寑閫熷姩鐢伙紝瀛愬厓绱犲疄鐜颁竴涓弽鍚憆otateZ(-360deg)鐨勫寑閫熷姩鐢绘坊鍔犱竴涓猺otateX(40deg)鐨勫姩鐢荤埗鍏冪礌銆傜敱浜庣埗瀹瑰櫒鍜屽瓙瀹瑰櫒鍚屾椂鍚戠浉鍙嶇殑鏂瑰悜鏃嬭浆锛屾墍浠ュ瓙鍏冪礌瀹為檯涓婄湅璧锋潵鍜屾病鏈夋棆杞竴鏍枫€備絾鏄敱浜庢垜浠坊鍔犱簡鍙︿竴涓猺otateX(40deg)鍔ㄧ敾锛屽畠鐪嬭捣鏉ュ儚杩欎釜3D鏁堟灉銆備箣鍓嶏紝鎴戜滑鐨勪唬鐮佹槸杩欐牱鐨勶細
