惊人的！！CSS也能实现Aurora吗？
时间：2023-03-28 00:59:39
HTML
涓婃鍐欏畬杩欑瘒鏂囩珷鈥斺€旂敤娓愬彉瀹炵幇楂樼娴撻儊鐨勮儗鏅厜鍔ㄧ敾锛屾湁鍚屽鍦ㄦ枃绔犱笅鏂硅瘎璁虹暀瑷€銆傚彲浠ョ敤CSS瀹炵幇鏋佸厜鍚楋紵鍍忚繖鏍凤細emmm锛岃繖鏈夌偣灏村艾銆備笉杩囷紝鏈€杩戞垜涔熻瘯鐫€灏濊瘯浜嗕竴涓嬨€傝櫧鐒舵棤娉曟ā鎷熷嚭杩欐牱鐪熷疄鐨勬晥鏋滐紝浣嗘槸鐢–SS鏉ュ埗浣滀竴浜涚被浼肩殑鐗规晥杩樻槸鍙互鐨勩€備粖澶╀竴璧锋潵璇曡瘯鍚с€傚湪瑙傚療浜嗘瀬鍏夌殑涓€浜涘浘鐗囧悗锛屾垜鍙戠幇浜嗘瀬鍏夊姩鐢讳腑涓€浜涙瘮杈冮噸瑕佺殑鍏冪礌锛氬熀浜庢繁鑹茶儗鏅殑鏄庝寒娓愬彉鑹茬被浼间簬姘存尝鐨勫姩鐢绘晥鏋溿€傛槑浜殑娓愬彉鑹插彲浠ュ敖閲忎娇鐢ㄦ笎鍙樻潵妯℃嫙銆傝嚦浜庢按娉㈢殑鍔ㄧ敾鏁堟灉锛孲VG婊ら暅涓殑feturbulence灏辨槸涓撻棬涓烘璁捐鐨勩€傝繖涓繃婊ゅ櫒鐨勪娇鐢ㄥ湪鎴戣繃鍘荤殑鏂囩珷涓凡缁忓娆℃彁鍒般€傞櫎浜嗘笎鍙樺拰SVG婊ら暅锛屾垜浠繕鍙兘浣跨敤mix-blend-mode锛孋SS婊ら暅绛夊寮烘晥鏋溿€侽K锛屾湁浜嗗ぇ姒傜殑鎯虫硶涔嬪悗锛屽墿涓嬬殑灏辨槸缁х画灏濊瘯浜嗐€傛楠?.缁樺埗娣辫壊鑳屾櫙棣栧厛锛屾垜浠彲鑳介渶瑕佷竴涓繁鑹茶儗鏅潵浠ｈ〃鎴戜滑鐨勫绌恒€傚悓鏃剁偣涓€浜涙槦鏄燂紝鍙互鐢╞ox-shadow妯℃嫙鏄熸槦锛岃繖鏍锋垜浠氨鍙互鍦ㄤ竴涓猟iv涓畬鎴愪竴涓绌鸿儗鏅細
@functionrandomNum($max,$min:0,$u:1){@return($min+random($max))*$u;}@functionshadowSet($n,$size){$shadow:0000#fff;@for$i浠?鍒?n{$x:randomNum(350);$y:闅忔満鏁?500);$scale:randomNum($size)/10;$shadow:$shadow,#{$x}px#{$y}px0#{$scale}pxrgba(255,255,255,.8);}@return$shadow;}.g-wrap{浣嶇疆锛氱浉瀵癸紱瀹藉害锛?50px锛涢珮搴︼細500px锛涜儗鏅細#0b1a3a锛涙孩鍑猴細闅愯棌锛?::涔嬪墠{鍐呭锛氣€溾€濓紱浣嶇疆锛氱粷瀵癸紱瀹藉害锛?px锛涢珮搴︼細1px锛涜竟鐣屽崐寰勶細50%锛沚ox-shadow:shadowSet(100,6);}杩欎竴姝ユ瘮杈冪畝鍗曪紝鍊熷姪SASS锛屾垜浠彲浠ュ緱鍒拌繖鏍蜂竴寮犲绌鸿儗鏅浘锛歋tep2.浣跨敤娓愬彉鐢诲嚭鏋佸厜鐨勮疆寤撴帴涓嬫潵锛屼娇鐢ㄧ粯鍒舵瀬鍏夎疆寤撶殑娓愬彉銆傚叾瀹炲氨鏄緞鍚戞笎鍙橈細
