鏈枃涓昏璁茬殑鏄疌SS鐨勪竴涓潪甯告柊鐨勭壒鎬э紝CSS@property锛屽畠鐨勫嚭鐜板ぇ澶ф彁鍗囦簡CSS鐨勮兘鍔涳紒鏍规嵁MDN--CSSProperty锛孈propertyCSSat-rule鏄疌SSHoudiniAPI鐨勪竴閮ㄥ垎锛屽畠鍏佽寮€鍙戜汉鍛樻樉寮忓畾涔変粬浠殑CSS鑷畾涔夊睘鎬э紝鍏佽灞炴€х被鍨嬫鏌ャ€佽缃粯璁ゅ€间互鍙婂畾涔夎嚜瀹氫箟灞炴€ф槸鍚﹀彲浠ョ户鎵裤€備粈涔堟槸CSS鑳¤开灏硷紵CSSHoudini鍚戝紑鍙戣€呭紑鏀句簡CSS鐨勫簳灞侫PI锛岃寮€鍙戣€呭彲浠ラ€氳繃杩欏鎺ュ彛鑷鎵╁睍CSS锛屽苟鎻愪緵鐩稿簲鐨勫伐鍏疯寮€鍙戣€呭共棰勬祻瑙堝櫒娓叉煋寮曟搸鐨勬牱寮忓拰甯冨眬杩囩▼銆傚厑璁稿紑鍙戜汉鍛樼紪鍐欐祻瑙堝櫒鍙互瑙ｆ瀽鐨凜SS浠ｇ爜锛屼粠鑰屽垱寤烘柊鐨凜SS鍔熻兘銆傚綋鐒讹紝杩欎笉鏄湰鏂囩殑閲嶇偣锛屼絾鎴戜笉浼氳繃澶氭弿杩般€傚浣曚娇鐢–SS灞炴€э紵鎴戜滑灏嗛€氳繃涓€浜涚畝鍗曠殑渚嬪瓙蹇€熷叆闂紝閲嶇偣浠嬬粛瀹冨湪CSS鍔ㄧ敾涓殑鍏抽敭浣滅敤锛屼互鍙婂畠缁機SS鍔ㄧ敾甯︽潵鐨勫法澶ф敼杩涖€傜ず渚嬮€氬父锛屾垜浠畾涔夊拰浣跨敤CSS鑷畾涔夊睘鎬х殑鏂瑰紡濡備笅锛?root{--whiteColor:#fff;}p{color:(--whiteColor);}閫氳繃@property瑙勫垯锛屾垜浠繕鍙互瀹氫箟CSS鑷畾涔夊睘鎬у涓嬩唬鐮侊細绠€鍗曡В閲婏細@property--property-namein--property-name鏄嚜瀹氫箟灞炴€х殑鍚嶇О锛屽湪CSS涓彲浠ラ€氳繃var(--property-name)鏉ュ畾涔夛紝鍙傝€冭娉曪細鑷畾涔夊睘鎬х殑璇硶瑙勫垯锛屼篃鍙互鐞嗚В涓鸿〃绀哄畾涔夌殑鑷畾涔夊睘鎬х殑绫诲瀷inherits锛氭槸鍚﹀厑璁哥户鎵縤nitial-value锛氬垵濮嬪€煎叾涓瑻property瑙勫垯Descriptor涓殑璇硶鍜岀户鎵挎槸蹇呴渶鐨勩€傚綋鐒禞avaScript涓畾涔夌殑鍐欐硶涔熷緢绠€鍗曪紝椤轰究璇翠竴鍙ワ細鏀寔鐨剆yntax璇硶绫诲瀷syntax鏀寔鐨勮娉曠被鍨嬮潪甯镐赴瀵岋紝鍩烘湰涓婃兜鐩栦簡浣犺兘鎯冲埌鐨勬墍鏈夌被鍨嬨€俵engthnumberpercentagelength-percentagecolorimageurlintegerangletimeresolutiontransform-listtransform-functioncustom-ident(acustomidentifierstring)鐢?銆?銆亅瀹氫箟鐨凜SS@property鍙橀噺鐨勮娉曡娉晄ymbolsinsyntax鎺ュ彈涓€浜涚壒娈婄殑绫诲瀷瀹氫箟銆傝娉曪細''锛氭帴鍙楅€楀彿鍒嗛殧鐨勯鑹插€煎垪琛ㄨ娉曪細''锛氭帴鍙楃┖鏍煎垎闅旂殑闀垮害鍊煎垪琛ㄨ娉曪細'':鎺ュ彈鍗曚釜闀垮害鎴栬€呯┖鏍煎垎闅旂殑闀垮害鍊煎垪琛ㄥ氨OK浜嗭紝閾哄灚浜嗚繖涔堝锛岄偅涓轰粈涔堣鐢ㄨ繖涔堥夯鐑︾殑璇硶鏉ュ畾涔塁SS鑷畾涔夊睘鎬у憿锛烠SSHoudini瀹氫箟鑷畾涔夊彉閲忔湁浠€涔堝ソ澶勶紵璁╂垜浠竴涓€璋堣皥銆備娇鐢ㄩ鑹茶娉曡娉曠被鍨嬩綔鐢ㄤ簬娓愬彉銆傛垜浠潵鐪嬭繖鏍蜂竴涓緥瀛愩€傛垜浠湁杩欐牱涓€涓笎鍙樻ā寮忥細div{background:linear-gradient(45deg,#fff,#000);}鎴戜滑鍦ㄤ笂闈㈢殑浠ｇ爜涓嬮潰锛屾敼鐢–SS鑷畾涔夊睘鎬э細:root{--棰滆壊A锛?fff锛?-colorB:#000;}div{background:linear-gradient(45deg,var(--colorA),var(--colorB));}缁撴灉浠嶇劧鏄浉鍚岀殑娓愬彉鍥惧儚锛氭垜浠坊鍔犱簡杩囨浮鏁堟灉锛氾細root{--colorA:#fff;--colorB:#000;}div{鑳屾櫙:绾挎€ф笎鍙?45deg,var(--colorA),var(--colorB));杩囨浮锛?s鑳屾櫙锛?:hover{--colorA:榛勭豢鑹?--colorB锛氭繁绮夎壊锛泒}鐪嬬湅榧犳爣鎮仠鏃朵細鍙戠敓浠€涔堬細铏界劧鎴戜滑璁剧疆浜嗕竴涓?s鐨勮繃娓″姩鐢籺ransition:1sbackground浣嗕笉骞哥殑鏄紝CSS涓嶆敮鎸佽儗鏅笎鍙樿壊鐨勭洿鎺ヨ繃娓★紝鎴戜滑寰楀埌鐨勫彧鏄袱甯т箣闂寸殑鍙樺寲銆備娇鐢–SS@property鏀归€燨K锛屾帴涓嬫潵灏辨槸鏈枃鐨勪富瑙掞紝浣跨敤HoudiniAPI涓殑CSS鑷畾涔夊睘鎬ф潵鏇挎崲鍘熸潵鐨凜SS鑷畾涔夊睘鎬с€傜畝鍗曚慨鏀癸紝浣跨敤棰滆壊璇硶syntaxtype:@property--houdini-colorA{syntax:'';缁ф壙锛氬亣鐨勶紱鍒濆鍊硷細#fff;}@property--houdini-colorB{璇硶锛?';缁ф壙锛氬亣鐨勶紱鍒濆鍊硷細#000;}.property{鑳屾櫙锛氱嚎鎬ф笎鍙橈紙45deg锛寁ar锛?-houdini-colorA锛夛紝var锛?-houdini-colorB锛夛級;杩囨浮锛?s--houdini-colorA锛?s--houdini-colorB锛?:hover{--houdini-colorA:yellowgreen;--houdini-colorB锛氭繁绮夎壊锛泒}鎴戜滑浣跨敤@property璇硶瀹氫箟浜嗕袱涓狢SSHoudini鑷畾涔夊彉閲?-houdini-colorA鍜?-houdini-colorB锛屽綋hover鍙樺寲鏃舵敼鍙樿繖涓や釜棰滆壊銆傞渶瑕佹敞鎰忕殑鏄紝鎴戜滑璁剧疆鐨則ransition璇彞鏄痶ransition:1s--houdini-colorA,1s--houdini-colorB銆傚湪杩欓噷锛屾垜浠负CSSHoudini鑷畾涔夊彉閲忚缃繃娓★紝鑰屼笉鏄负鑳屾櫙璁剧疆杩囨浮锛屾垜浠湅鐪嬭繖娆＄殑鏁堟灉锛氬搰锛屾垚鍔熶簡锛屾笎鍙樿壊鐨勫彉鍖栦粠涓ゅ抚閫愬抚鍔ㄧ敾鍙樻垚浜嗚ˉ闂村姩鐢伙紝瀹炵幇浜嗕粠涓€绉嶆笎鍙樿壊杩囨浮鍒板彟涓€绉嶆笎鍙樿壊锛佽€岃繖閮借褰掑姛浜嶤SSHoudini鑷畾涔夊彉閲忕殑寮哄ぇ鑳藉姏锛丆odePenDemo--CSSHoudini鑷畾涔夊彉閲忓疄鐜版笎鍙樿壊杩囨浮鍔ㄧ敾浣跨敤CSS@property瀹炵幇娓愬彉鑳屾櫙鑹茶繃娓″姩鐢诲湪涓婇潰鐨凞EMO涓紝鎴戜滑浣跨敤CSSHoudini鑷畾涔夊彉閲忓皢鍘熸湰瀹氫箟鍦╞ackground涓殑杩囨浮鏁堟灉瀚佹帴鍒癱olor涔嬩笂涔熷氨鏄锛孋SS鏀寔灏嗕竴绉嶉鑹茶浆鎹负鍙︿竴绉嶉鑹层€傝繖鏍锋垜浠氨宸у鐨勫疄鐜颁簡娓愬彉鑳屾櫙鑹茬殑杩囨浮鍔ㄧ敾銆備箣鍓嶆垜浠璁轰簡鍦–SS涓湁澶氬皯绉嶆柟娉曞彲浠ヤ负娓愬彉鑳屾櫙棰滆壊杩囨浮璁剧疆鍔ㄧ敾鈥斺€斿阀濡欏湴璁剧疆鑳屾櫙棰滆壊娓愬彉鍔ㄧ敾锛侊紝鍒颁粖澶╀负姝紝鎴戜滑鏈変簡鍙︿竴绉嶅疄鐜版柟寮忥紒@property--colorA{璇硶锛?';缁ф壙锛氬亣鐨勶紱鍒濆鍊硷細绱孩鑹诧紱}@property--colorC{璇硶锛?';缁ф壙锛氬亣鐨勶紱鍒濆鍊硷細#f79188锛泒@property--colorF{璇硶锛?';缁ф壙锛氬亣鐨勶紱鍒濆鍊硷細绾㈣壊锛泒div{鑳屾櫙锛氱嚎鎬ф笎鍙橈紙45deg锛寁ar锛?-colorA锛夛紝var锛?-colorC锛夛紝var锛?-colorF锛夛級;鍔ㄧ敾锛氭敼鍙?0s鏃犻檺绾挎€э紱}@keyframes鏀瑰彉{20%{--colorA锛氱孩鑹诧紱--colorC:#a93ee0;--colorF锛氱传绾㈣壊锛泒40%{--colorA:#ff3c41;--colorC:#e228a0;--colorF:#2e4c96;}60%{--colorA:姗欒壊;--colorC锛氱豢鑹诧紱--colorF锛氳摑缁胯壊锛泒80%{--colorA:#ae63e4;--colorC:#0ebeff;--colorF:#efc371;}}瀹屾暣浠ｇ爜鍙互鐐瑰嚮杩欓噷锛欳odePenDemo--CSSHoudini鑷畾涔夊彉閲忓疄鐜版笎鍙橀鑹茶繃娓″姩鐢?conic-gradient鍜孋SS@property瀹炵幇楗煎浘鍔ㄧ敾OK锛屼笂闈㈡垜浠紨绀轰簡璇硶鏄鑹茶娉曠被鍨嬬殑鎯呭喌銆傚湪鏂囩珷鐨勫紑澶达紝鎴戜滑涔熷垪涓句簡寰堝璇硶绫诲瀷銆傛帴涓嬫潵鎴戜滑璇曡瘯鍏朵粬鐨勭被鍨嬶紝鐢╬ercentage鐧惧垎姣旂被鍨嬫垨鑰卆ngle瑙掑害绫诲瀷鏉ュ疄鐜伴ゼ鍥剧殑鎮仠鍔ㄧ敾銆傚鏋滆繕鏄敤浼犵粺鐨勫啓娉曪紝鎴戜滑鍙互浣跨敤瑙掑害娓愬彉鏉ュ疄鐜颁笉鍚岃搴︾殑楗煎浘锛?div>
.normal{width:200px;楂樺害锛?00px锛涜竟鐣屽崐寰勶細50%锛涜儗鏅細鍦嗛敟娓愬彉锛堥粍缁胯壊锛岄粍缁胯壊25%锛岄€忔槑25%锛岄€忔槑100%锛夛紱杩囨浮锛氳儗鏅?0鈥嬧€?ms锛?:hover{鑳屾櫙锛氬渾閿ユ搴︼紙榛勭豢鑹诧紝榛勭豢鑹?0%锛岄€忔槑60.1%锛岄€忔槑100%锛夛紱}}浼氬緱鍒拌繖鏍风殑鏁堟灉锛岀敱浜巆onic-gradient涓嶆敮鎸佽繃娓″姩鐢伙紝寰楀埌鐨勬槸鐩存帴浠庝竴甯у埌鍙︿竴甯х殑鍙樺寲锛歄K锛屼娇鐢–SSHoudini鑷畾涔夊彉閲忚繘琛屽彉鎹細@property--per{'<鐧惧垎姣?';缁ф壙锛氬亣鐨勶紱鍒濆鍊硷細25%锛泒div{鑳屾櫙锛氬渾閿ユ搴︼紙榛勭豢鑹诧紝榛勭豢鑹瞯ar锛?-per锛夛紝閫忔槑var锛?-per锛夛紝閫忔槑100%锛夛紱杩囨浮锛?-姣?00姣绾挎€э紱&:hover{--per:60%;}}鐪嬬湅鏀归€犲悗鐨勬晥鏋滐細CodePodeDemo--conic-gradientwithCSS@property瀹炵幇楗煎浘鍔ㄧ敾鐨勬晥鏋滐紝浠ュ墠鍙兘鐢ㄧ函CSS寰堝鏉傦紝濡傛灉鑳借交鏉惧疄鐜扮殑璇濓紝涓嶅緱涓嶆劅鎱–SS@property鐨勫己澶ц兘鍔涳紒椤轰究璇翠竴鍙ワ紝|symbolofsyntax鍦ㄥ畾涔塇oudini鑷畾涔夊彉閲忔椂婕旂ず浜嗕竴浜涚◢寰鏉傜殑璇硶鐢ㄦ硶銆傚湪conic-gradient涓紝鎴戜滑鍙互浣跨敤鐧惧垎姣旀垨瑙掑害浣滀负鍏抽敭瀛椼€備笂闈㈢殑DEMO涔熷彲浠ユ敼鎴愯繖鏍凤細@property--per{syntax:'
