巧妙利用渐变实现高级背景光动画

时间：2023-03-28 19:10:37 HTML

background鍦ㄤ笂涓€绡囧埄鐢ㄦ护闀滃疄鐜伴珮绾ф枃瀛楅棯鍔ㄨ繃娓℃晥鏋滀腑锛屾垜浠彁鍒颁簡涓€涓潪甯告湁瓒ｇ殑鑻规灉鏄剧ず鏂囧瓧鍓嶅姩鐢绘晥鏋溿€傝繖绡囨枃绔犱細甯︽潵鍙︿竴涓湁瓒ｇ殑鏁堟灉锛屽氨鏄敤娓愬彉鏉ュ疄鐜颁竴涓珮绾х殑鑳屾櫙鍏夊姩鐢汇€傝繖涓晥鏋滅敤鍦ㄨ嫻鏋滃畼缃慽Phone13Pro鐨勪粙缁嶉〉涓婏細杩欎釜鏁堟灉瀹炵幇闅惧害姣旇緝澶э紝鐢–SS瀹屽叏澶嶅埗銆侰SS妯℃嫙鍑烘潵鐨勫厜鏁堝拰闃村奖姣旇緝浣庯紝鍙兘璇存槸灏介噺杩樺師浜嗐€傚叾瀹炴瘡缁勭伅鍩烘湰閮芥槸涓€鏍风殑锛屾墍浠ユ垜浠彧闇€瑕佸疄鐜板叾涓殑涓€涓氨鍙互瀹炵幇鍑犱箮鏁翠釜鏁堟灉浜嗐€傝瀵熻繖涓晥鏋滐細瀹冪殑鏍稿績鍏跺疄灏辨槸瑙掑害娓愬彉鈥斺€攃onic-gradient()锛屽埄鐢ㄨ搴︽笎鍙橈紝鎴戜滑澶ц嚧鍙互瀹炵幇杩欐牱涓€涓晥鏋滐細

div{width:1000px;楂樺害锛?00px锛涜儗鏅細鍦嗛敟娓愬彉锛堜粠-45deg鍒?00px300px锛宧sla锛?70deg锛?00%锛?0%锛?7锛夛紝閫忔槑50%锛岄€忔槑锛夛紝绾挎€ф笎鍙橈紙-45deg锛?060d5e锛?002268锛?}鐪嬬湅鏁堟灉锛氭湁鐐规剰鎬濄€傚綋鐒讹紝浠旂粏鐪嬶紝娓愬彉鐨勯鑹插苟涓嶆槸浠庝竴绉嶉鑹插埌閫忔槑缁撴潫锛岃€屾槸棰滆壊A鈥斺€旈€忔槑鈥斺€旈鑹睟銆傝繖鏍蜂竴鏉ワ紝鍙︿竴鍗婄殑鍏夋簮灏变笉閭ｄ箞姝绘澘浜嗐€備慨鏀瑰悗鐨凜SS浠ｇ爜:div{width:1000px;楂樺害锛?00px锛涜儗鏅細鍦嗛敟娓愬彉锛堜粠-45degat400px300px,hsla(170deg,100%,70%,.7),transparent50%,hsla(219deg,90%,80%,.5)100%),linear-gradient(-45deg,#060d5e,#002268);}鎴戜滑鍦ㄨ搴︽笎鍙樼殑鏈熬娣诲姞浜嗛澶栫殑棰滆壊锛屼互鑾峰緱鏇村ソ鐨勮鎰燂細emm锛屽埌杩欓噷锛屾垜浠細鍙戠幇鍙湁瑙掑害娓愬彉conic-gradient()杩樹笉澶燂紝瀹冩棤娉曟ā鎷熷嚭鍏夋簮闃村奖鐨勬晥鏋滐紝鎵€浠ュ繀椤诲€熷姪鍏朵粬灞炴€ф潵瀹炵幇鍏夋簮闃村奖鐨勬晥鏋溿€傝鍒拌繖閲岋紝鎴戜滑鑷劧浼氭兂鍒癰ox-shadow銆傝繖閲屾湁涓€涓妧宸э紝鍙互浣跨敤澶氫釜鐩掑瓙闃村奖鏉ュ疄鐜伴湏铏圭伅鐨勬晥鏋溿€傝鎴戜滑鍐嶆坊鍔犱竴涓猟iv鏉ュ疄鐜板厜婧愮殑闃村奖锛?divclass="shadow">

.shadow{width:200px;楂樺害锛?00px锛涜儗鏅細#fff锛涙闃村奖锛?px0.5pxhsla(170deg,95%,80%,1),0px01pxhsla(170deg,91%,80%,.95),0px02pxhsla(171deg,91%,80%,.95),0px03pxhsla(171deg,91%,80%,.95),0px04pxhsla(171deg,91%,82%,.9),0px05pxhsla(172deg,91%,82%,.9),0px010pxhsla(173deg,91%,84%,.9),0px020pxhsla(174deg,91%,86%,.85),0px040pxhsla(175deg,91%,86%,.85),0px060pxhsla(175deg,91%,86%,.85);}OK锛屽厜鏈変簡锛岄棶棰樻槸鎴戜滑鍙渶瑕佸厜鐨勪竴渚э紝鎬庝箞鍔烇紵鍓緫鐨勬柟寮忔湁寰堝绉嶃€傚湪杩欓噷锛屾垜浠嬬粛涓€绉嶄娇鐢╟lip-path瑁佸壀鍏冪礌浠绘剰绌洪棿鐨勬柟娉曪細.shadow{width:200px;楂樺害锛?00px锛涜儗鏅細#fff锛涚洅瀛愰槾褰憋細.....;clip-path:polygon(-100%100%,200%100%,200%500%,-100%500%);}鍘熺悊鏄繖鏍风殑锛氳繖鏍凤紝鎴戜滑寰楀埌涓€渚х殑鍏夛細here,In鍏跺疄CSS涔熸湁瀹炵幇鍗曢潰闃村奖鐨勬柟娉曪紙浣犱笉鐭ラ亾鐨凜SS闃村奖鎶€宸у拰缁嗚妭锛夛紝浣嗗疄闄呮晥鏋滃苟涓嶅ソ锛屾渶缁堣繕鏄噰鐢ㄤ簡涓婅堪鏂规銆傛帴涓嬫潵鐢ㄥ畾浣嶃€佹棆杞瓑鏂规硶灏嗕笂闈㈡彁鍒扮殑鍗曡竟鍏夊拰瑙掑害娓愬彉閲嶅彔璧锋潵锛屽氨鍙互寰楀埌杩欐牱鐨勬晥鏋滐細杩欏凡缁忓緢鐩镐技浜嗐€傛帴涓嬫潵瑕佸仛鐨勬槸璁╂暣涓浘妗堝姩璧锋潵銆傝繖閲屾湁鐩稿綋澶氱殑鎶€宸с€傛牳蹇冩槸鍒╃敤CSS@Property瀹炵幇瑙掑害娓愬彉鐨勫姩鐢伙紝灏嗗厜鐓у姩鐢诲拰瑙掑害娓愬彉閲嶅彔銆傛垜浠渶瑕佷娇鐢–SS@Property淇敼浠ｇ爜娓愬彉锛屾牳蹇冧唬鐮佸涓嬶細

@property--xPoint{鍙ユ硶锛?<闀垮害>'锛涚户鎵匡細鍋囩殑锛涘垵濮嬪€硷細400px;}@property--yPoint{璇硶锛?';缁ф壙锛氬亣鐨勶紱鍒濆鍊硷細300px锛泒.wrap{浣嶇疆锛氱浉瀵癸紱淇濊瘉閲戯細鑷姩锛涘搴︼細1000px锛涢珮搴︼細600px锛涜儗鏅細鍦嗛敟姊害锛堜粠-45degatvar(--xPoint)var(--yPoint),hsla(170deg,100%,70%,.7),transparent50%,hsla(219deg,90%,80%,.5)100%),绾挎€ф搴?-45deg,#060d5e,#002268);animation:pointMove2.5s鏃犻檺浜ゆ浛绾挎€?}.shadow{position:absolute;椤堕儴锛?300px锛涘乏锛?330px锛涘搴︼細430px锛涢珮搴︼細300px锛涜儗鏅細#fff锛涘彉鎹㈠師鐐癸細100%100%锛涘彉鎹細鏃嬭浆锛?25搴︼級锛涘壀杈戣矾寰勶細澶氳竟褰紙-100%100%锛?00%100%锛?00%500%锛?100%500%锛夛紱鐩掑瓙闃村奖:...杩欓噷鐪佺暐浜嗗緢澶氬奖瀛愪唬鐮侊紱animation:scale2.5sinfinitealternatelinear;}@keyframesscale{50%,100%{transform:rotate(225deg)scale(0);}}@keyframespointMove{100%{--xPoint:100px;--y鐐癸細0锛泒}杩欐牱锛屾垜浠氨瀹炵幇浜嗕竴涓畬鏁寸殑鐏厜鍔ㄧ敾锛氭垜浠噸鏂版⒊鐞嗗疄鐜拌繖鏍蜂竴涓姩鐢荤殑姝ラ锛氫娇鐢ㄨ搴︽笎鍙榗onic-gradient鎼缓鍩烘湰妗嗘灦锛岃繖閲屼篃浣跨敤浜嗗閲嶆笎鍙樸€傝搴︽笎鍙樼殑鑳屽悗鏄繁鑹茶儗鏅壊锛沵ultiplebox-shadow鐢ㄤ簬瀹炵幇鍏夊奖鏁堟灉锛堜篃绉颁负Neon鏁堟灉锛夛紝clip-path鐢ㄤ簬鍒涘缓鍏冪礌鐨勪换鎰忓尯鍩燂紝clipping浣跨敤CSS@Property瀹炵幇娓愬彉鍔ㄧ敾鏁堟灉銆傚墿涓嬬殑宸ヤ綔灏辨槸閲嶅涓婇潰鐨勬楠わ紝娣诲姞鍏朵粬鐨勬笎鍙樺拰鍏夋簮锛岃皟璇曞姩鐢汇€傛渶鍚庯紝鎴戜滑鍙互寰楀埌杩欎箞涓€涓畝鍗曠殑妯℃嫙鏁堟灉锛氱敱浜庡師鏁堟灉鏄?mp4锛屾棤娉曞緱鍒板噯纭殑棰滆壊锛屼篃鏃犳硶寰楀埌闃村奖鐨勫弬鏁帮紝棰滆壊鐩存帴鐢ㄦ潵pickcolorpalette锛屾ā鎷熷嚭闃村奖闅忎究鐐癸紝濡傛灉鏈夋簮鏂囦欢锛屽弬鏁板噯纭紝鍙互妯℃嫙鐨勬洿閫肩湡锛屾洿瀹屾暣浠ｇ爜鍙互鎴宠繖閲岋細CodePen--iPhone13ProGradient鏂囨湯锛屾湰鏂囨洿澶氱殑鏄浘鐗囥€傚湪瀹炶返涓紝鍋氬嚭涓婇潰鐨勬晥鏋滆偗瀹氭湁鏇翠紭闆呯殑鏂规锛屽鏋滅敤CSS妯℃嫙搴旇浼氭湁鏇村ソ鐨勬柟妗堬紝杩欓噷鎴戝彧鏄姏鐮栧紩鐜夛紝涓€浜涙妧宸?銆?銆?锛岃繃绋嬩腑鐨?涓繕鏄€煎緱瀛︿範鐨勩€傚ソ浜嗭紝鏈枃鍒版缁撴潫锛屽笇鏈涜繖绡囨枃绔犲浣犳湁鎵€甯姪:)鎯宠鑾峰彇鏈€鏈夎叮鐨凜SS璧勮锛屽崈涓囦笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇濂囬椈杞朵簨馃槃鏇村绮惧僵CSS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屾寔缁洿鏂帮紝娆㈣繋鐐逛釜鏄熻闃呮敹钘忋€傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>