CSS还能这样玩吗？异想天开的渐变艺术

div{width:100vw;楂樺害锛?00vh锛沚ackground:repeating-conic-gradient(#fff,#000,#fff30deg);}灏?0deg鏇挎崲涓?.1deg鐒跺悗锛屾垜浠皢涓婇潰浠ｇ爜涓殑30deg鏇挎崲涓轰竴涓緢灏忕殑鍊硷紝绫讳技杩欐牱锛歿background:repeating-conic-gradient(#fff,#000,#fff0.1deg);}杩欐槸浠€涔堬紵鎯充竴鎯筹紝杩欒浠ｇ爜缁樺埗鍑烘潵鐨勫浘褰細鏄粈涔堟牱瀛愬憿锛熺湅鐪嬫晥鏋滐細鍝囷紝涓嶅彲鎬濊銆傝繖閲?.1deg寰堝叧閿紝杩欓噷鐨勮搴﹁秺灏忥紙灏忎簬1deg瓒婂ソ锛夛紝鍥惧舰瓒婂喎锛屼篃灏辨槸鎴戜滑鎵€璇寸殑鏁伴噺绾у鑳屾櫙鍥惧舰鐨勫奖鍝嶃€侰odePen--OneLineCSSPattern浣跨敤CSS@property瑙傚療鍙樺寲杩囩▼銆備箣鍓嶏紝濡傛灉鎴戜滑鐩存帴鍐欎笅闈㈢殑杞満浠ｇ爜锛屾槸寰椾笉鍒拌ˉ闂磋浆鍦哄姩鐢荤殑锛屽彧鑳藉緱鍒伴€愬抚鍔ㄧ敾锛歞iv{background:repeating-conic-gradient(#fff,#000,#fff0.1deg);transition:background1s;}div:hover{background:repeating-conic-gradient(#fff,#000,#fff30deg);}鍙兘寰楀埌杩欎釜鍘熷洜鏄疌SS涓嶆敮鎸佽繖绉嶅鏉傛笎鍙樼殑鐩存帴杩囨浮鍔ㄧ敾锛歄K锛屾帴涓嬫潵锛屽埄鐢ㄦ湰鏂囦粙缁嶇殑CSS@property鐭ヨ瘑鈥斺€擟SS@property锛屽寲涓嶅彲鑳戒负鍙兘锛屾垜浠彲浠ヤ娇鐢–SS@property瑙傚療瀹冧滑涓や釜鐘舵€佸彉鍖栫殑杩囩▼銆傜畝鍗曚慨鏀逛唬鐮侊紝鏍稿績浠ｇ爜濡備笅锛欯property--angle{syntax:'';缁ф壙锛氬亣鐨勶紱鍒濆鍊硷細0.1deg;}div{鑳屾櫙锛氶噸澶嶅渾閿ユ搴︼紙#fff锛?000锛?fffvar锛?-angle锛夛級;transition:--angle2s;}html:hover{--angle:30deg;}鍝囧摝锛屼负浜嗘壘鍑轰笉鍚屾暟閲忕骇鍗曚綅瀵硅繖寮犲浘鐨勫奖鍝嶏紝鎴戠湅浜嗕竴涓嬪甫鏈夊緢绁炲鐨勮繃娓″姩鐢绘晥鏋溿€傚己鐑堝缓璁偣杩汥EMO鎰熷彈涓嬭浆鍦烘晥鏋滐細CodePen--repeating-conic-gradientCSSPatternTransition(OnlyChrome85+)tweentransitionanimationrealizedbyCSS@property锛岀湅鍙樺寲杩囩▼浠?0deg鍒?.1deg锛屾垜浠彲浠ュぇ鑷寸湅鍑?.1deg杩欎釜灏忓崟浣嶅鍥惧舰鐨勫奖鍝嶃€傚悓鏃讹紝鍗曚綅瓒婂皬锛岀敾闈腑鐨勭粏鑺傝秺澶氾紝鍏蜂綋缁嗚妭澶у鍙互鑷灏濊瘯銆傚涓緞鍚戞笎鍙樺拰澶氫釜鍏锋湁灏忓崟浣嶇殑鍦嗛敟娓愬彉鏉ュ垱寤烘湁瓒ｇ殑鑳屾櫙浣跨敤涓婇潰鐨勪竴浜涙妧宸э紝鎴戜滑鍙互浣跨敤澶氫釜寰勫悜娓愬彉锛坮epeating-radial-gradient锛夊拰澶氫釜瑙掑害娓愬彉锛坮epeating-conic-gradient锛夌敓鎴愪竴浜涢潪甯告湁瓒ｇ殑鑳屾櫙鍥剧墖銆傜畝鍗曠綏鍒椾竴绯诲垪锛歞iv{background-image:repeating-radial-gradient(circleatcentercenter,rgb(241,43,239),rgb(239,246,244)3px);}div{background-image:repeating-寰勫悜娓愬彉锛堝渾鍦?5%30%锛宺gb(4,4,0),rgb(52,72,197),rgb(115,252,224),rgb(116,71,5),rgb(223,46,169),rgb(0,160,56),rgb(234,255,0)2px);}div{background-image:repeating-radial-gradient(circleatcentercenter,rgb(81,9,72),rgb(72,90,223),rgb(80,0,34),rgb(34,134,255),rgb(65,217,176),rgb(241,15,15),rgb(148,213,118)0.1px);}div{background-image:repeating-radial-gradient(ellipseatcentercenter,rgb(75,154,242),rgb(64,135,228),rgb(54,117,214),rgb(43,98,200),rgb(33,79,185),rgb(22,60,171),rgb(12,42,157),rgb(1,23,143)0.01px);}鍢垮樋锛屾湁鎰忔€濆悧锛熸偍鍙互鑷繁灏濊瘯鏇村鏈夎叮鐨勫浘褰€傚畬鏁寸殑DEMO浠ｇ爜鍙互鐐规鏌ョ湅锛欳odePenDemo--MagicGradientArt鑳芥湁澶氬皬鍛紵repeating-radial-gradient杩欑被浼间簬radial-gradient()骞堕噰鐢ㄧ浉鍚岀殑鍙傛暟锛屼絾瀹冨湪鎵€鏈夋柟鍚戜笂閲嶅棰滆壊浠ヨ鐩栧叾鏁翠釜瀹瑰櫒浠ヤ笅闈㈢殑浠ｇ爜涓轰緥锛屽崟娆＄粯鍒跺浘褰㈢殑缁堢偣涓?px锛岃繖鏄湰鏂囩殑閲嶇偣銆傝兘灏忓埌浠€涔堢▼搴︼紵:root{--length:1px}{background-image:repeating-radial-gradient(circleat17%32%,rgb(4,4,0),rgb(52,72,197),rgb(115,252,224),rgb(116,71,5),rgb(223,46,169),rgb(0,160,56),rgb(234,255,0)var(--length));}鎴戞槑鐧戒簡浠?00px鍒?.00001px缁樺埗浜?涓浘褰㈣繘琛屽姣旓細鍦?.001px鍒?.0001px鑼冨洿鍐咃紝鍥惧舰鍩烘湰閫€鍖栦负绮掑瓙鍥惧舰锛岀湅涓嶅埌寰勫悜娓愬彉鐨勮疆寤擄紝浣嗗湪0.00001px绾у埆锛屽眳鐒堕€€鍖栨垚浜嗙函鑹插浘鐗囷紒CodePenDemo--涓嶅悓绾у埆闀垮害鍗曚綅瀵箁epeating-radial-gradient鍥惧舰鐨勫奖鍝嶄娇鐢╮epeating-radial-gradient瀹炵幇鐢佃闆姳鍣０鍔ㄧ敾鍦ㄤ笂闈㈢殑DEMO涓紝鎴戜滑鍙戠幇褰撳尯闂村湪0.001px鍜?.0001px涔嬮棿鏃讹紝-gradient鍩烘湰涓婇€€鍖栦负绮掑瓙鍥惧舰锛歿background-image:repeating-radial-gradient(circleat17%32%,rgb(4,4,0),rgb(52,72,197),rgb(115,252,224),rgb(116,71,5),rgb(223,46,169),rgb(0,160,56),rgb(234,255,0)0.0008px);}杩欎釜鍜岀數瑙嗛洩鑺卞睆涓嶆槸寰堝儚褰卞搷锛熷井璋?.0008px鐨勫弬鏁帮紝浣跨敤鍑犲抚涓嶅悓鐨勫姩鐢伙紝鎴戜滑鍙互寰楀埌鐢佃闆姳鍣０鍝堝搱锛屽緢鏈夋剰鎬濓紝瀹屾暣婧愮爜鍙互鐐硅繖閲岋細CopepenDemo--PURECSSTVNOISEEFFECT(OnlyChrome85+)鏈€鍚庡嚑琛屽悗鍙颁唬鐮佽兘鍋氫粈涔堬紵鑲畾涓嶆浜庢锛屽綋鐒讹紝杩欎笉灏辨槸CSS鐨勪箰瓒ｆ墍鍦ㄥ悧銆傛兂瑕佽幏鍙栨渶鏈夎叮鐨凜SS璧勮锛屽崈涓囦笉瑕侀敊杩囨垜鐨刬CSS鍏紬鍙佛煒勫ソ浜嗭紝鏈枃鍒版缁撴潫锛屽笇鏈涘浣犳湁鎵€甯姪锛氾級鏇村绮惧僵鐨凜SS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github--iCSS锛屾寔缁洿鏂颁腑锛屾杩庣偣涓槦璁㈤槄鏀惰棌銆傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>