Github上10个你恨不得迟到的CSS项目，帮你寻找写CSS的灵感！

$poptipBg:#30363d;$color:#fff;$triangle:8px;$distance:-12px;.poptip{浣嶇疆锛氱浉瀵癸紱z-鎸囨暟锛?01锛?::before,&::after{鍙鎬э細闅愯棌锛涗笉閫忔槑搴︼細0锛涜浆鎹細translate3d(0,0,0);杩囨浮锛氭墍鏈?.3s缂撳拰0.2s锛涙澶у皬锛氳竟妗嗘锛泒&::before{鍐呭锛氣€溾€濓紱浣嶇疆锛氱粷瀵癸紱瀹藉害锛?锛涢珮搴︼細0锛涜竟妗嗘牱寮忥細瀹炲績锛涜竟妗嗗搴︼細$triangle$triangle0$triangle锛涜竟妗嗛鑹诧細$poptipBg閫忔槑閫忔槑閫忔槑锛涘乏锛氳绠楋紙50%-#{$triangle}锛夛紱椤堕儴锛?px锛涜浆鎹細translateX(0%)translateY($distance);}&::after{瀛椾綋澶у皬锛?4px锛涢鑹诧細$棰滆壊锛涘唴瀹癸細灞炴€э紙鍜忓徆璋冩帶鍒讹級锛涗綅缃細缁濆锛涘～鍏咃細6px12px锛涚┖鐧斤細nowrap锛泎-鎸囨暟锛?1锛涘乏锛?0%锛涘簳閮細100%锛涜浆鎹細translateX(-50%)translateY($distance);鑳屾櫙锛?poptipBg;琛岄珮锛?锛涜竟鐣屽崐寰勶細2px锛泒&:hover::before,&:hover::after{鍙鎬э細鍙锛涗笉閫忔槑搴︼細1锛泒}.btn{鏈€灏忓搴︼細100px锛涢珮搴︼細1.5锛涘～鍏咃細5px10px锛涢鑹诧細#fff锛涜儗鏅細#00adb5锛涜竟鐣屽崐寰勶細4px锛涙枃鏈榻愶細灞呬腑锛沜ursor:pointer;}Effect:https://github.com/QiShaoXuan...animista杩欎釜椤圭洰鏈夊悇绉岰SS鏁堟灉锛岃繕鏈変唬鐮佹紨绀猴紝鍙互鐩存帴澶嶅埗浠ｇ爜锛屼篃鍙互澶嶅埗鍘嬬缉浠ｇ爜銆傚鏋滀綘姝ｅ湪瀵绘壘鏌愮CSS鏁堟灉锛屼綘鍙互鍦ㄨ繖閲屾壘鍒板畠http://animista.net/spinkit鏄悇绉嶅姞杞芥晥鏋滅殑CSS浠ｇ爜鐗囨鐨勯泦鍚堛€係pinKit浠呬娇鐢紙鍙樻崲鍜屼笉閫忔槑搴︼級CSS鍔ㄧ敾鏉ュ垱寤烘祦鐣呬笖鏄撲簬鑷畾涔夌殑鍔ㄧ敾銆俬ttps://tobiasahlin.com/spinkit/鍦ㄥ伐浣滅殑鍗佸ぉ鍐呮帉鎻SS3銆傞噷闈㈢殑鍐呭鍖呮嫭璁茶В鍜屼唬鐮佺粌涔犮€傚瀹屼箣鍚庡彲浠ユ妸瀛﹁繃鐨刟pi瀹炶返涓€涓嬶紝鐪熸槸澶ソ浜嗐€係upercat鍏ラ棬鍓嶇鐨勬椂鍊欙紝鎴戜篃瀛︿範浜嗛噷闈㈢殑鍐呭銆傝櫧鐒舵垜鐜板湪閮藉揩蹇樿浜嗮煒傦紝浣嗘槸鎴戝浼氫簡锛?https://www.imooc.com/learn/33Animate杩欐槸涓€涓湁瓒ｇ殑锛岃法娴忚鍣ㄧ殑css3鍔ㄧ敾搴擄紝鍐呯疆浜嗗緢澶氬吀鍨嬬殑css3鍔ㄧ敾锛屽吋瀹规€уソ锛岀畝鍗曟槗鐢ㄣ€俛nimate.css浣跨敤璧锋潵闈炲父绠€鍗曪紝鍥犱负瀹冪粰涓嶅悓鐨勭被缁戝畾浜嗕笉鍚岀殑鍔ㄧ敾锛屾墍浠ヤ綘鎯充娇鐢ㄥ摢绉嶅姩鐢伙紝鍙渶瑕佸湪鍏冪礌涓坊鍔犻€氱敤绫籥nimated鍜岀浉搴旂殑绫诲嵆鍙€備綔涓轰竴涓墠绔紑鍙戯紝濡傛灉浣犱笉鐭ラ亾杩欎釜搴擄紝浣犵湡鐨勪細澶辫触銆俬ttps://animate.style/sassSass鏄疌SS鐨勯缂栬瘧璇█锛孲ass璧嬩簣浜咰SS鏇村己澶х殑鍔熻兘銆傚畠鎻愪緵浜嗗彉閲忥紙variables锛夈€佸祵濂楋紙nestedrules锛塠娣烽煶锛坢ixins锛夈€佸嚱鏁帮紙functions锛夌瓑锛屽畬鍏ㄥ吋瀹笴SS璇硶銆係ass鍙互甯姪缁勭粐澶嶆潅鐨勬牱寮忚〃锛屽苟浣垮湪椤圭洰鍐呮垨璺ㄩ」鐩叡浜璁″彉寰楀鏄撱€俬ttps://sass.bootcss.com/docu...lessLess鏄竴绉岰SS棰勫鐞嗚瑷€锛屽畠鎵╁睍浜咰SS璇█骞跺鍔犱簡鍙橀噺銆丮ixins鍜屽嚱鏁扮瓑鐗规€с€侺ess鍙互杩愯鍦∟ode鎴栨祻瑙堝櫒涓娿€俬ttps://less.bootcss.com/stylus瀵屾湁琛ㄧ幇鍔涖€佸姩鎬併€佸仴澹殑CSS銆傚畠鎻愪緵浜嗕竴绉嶉珮鏁堛€佸姩鎬佸拰瀵屾湁琛ㄧ幇鍔涚殑鏂瑰紡鏉ョ敓鎴怌SS銆傛敮鎸佺缉杩涜娉曞拰甯歌CSS鏍峰紡銆俬ttps://stylus-lang.com/CSS棰勫鐞嗗櫒鎶€鏈凡缁忛潪甯告垚鐔燂紝瓒婃潵瓒婂鐨凜SS棰勫鐞嗗櫒妗嗘灦搴旇繍鑰岀敓銆傚浜巗ass銆乴ess鍜宻tylus锛屽湪鐜板湪鐨剉ue鍜宺eact椤圭洰涓粡甯哥敤鍒帮紝鐢ㄦ硶涔熷緢绠€鍗曘€傚彧瑕佸浼氫竴涓紝鍏朵粬涓や釜灏卞緢濂界敤浜嗐€傞」鐩腑鐢ㄥ摢涓€涓氨鐪嬩綘鑷繁鍠滄浜嗐€傛湰鏈熺粨鏉燂紝鍒嗕韩鍒拌繖閲屻€傛垜鏄皬缂朜anfengChui锛屼笓娉ㄤ簬鍒嗕韩濂界帺銆佹湁瓒ｃ€佹柊棰栥€佸疄鐢ㄧ殑寮€婧愰」鐩€佸紑鍙戣€呭伐鍏枫€佸涔犺祫婧愶紒甯屾湜鍜屽ぇ瀹朵竴璧峰涔犱氦娴併€傛杩庢潵鍒版垜鐨勫叕浼楀彿銆怗ithub瀵艰埅绔欍€戙€備箣鍓嶇殑鎺ㄨ崘澶編浜嗭紒鎷ユ湁3涓紑婧愬浘鏍囧簱锛屽啀涔熶笉鐢ㄨ璁捐甯堜簡銆?0涓綘浠庢湭瑙佽繃鐨剉ue.js搴擄紒鐢ㄥ緱濂斤紝浜嬪崐鍔熷€嶏紒澶強鏃朵簡锛?3涓猄pringBoot鍩硅椤圭洰锛岀敤濂斤紝鍗囪亴鍔犺柂涔熶笉鎰佽繕鍦ㄤ粠澶村埌灏惧仛椤圭洰锛熻繖6涓猄pringBoot椤圭洰鐢ㄥソ锛屼簨鍗婂姛鍊嶏紒銆?0鍚庣缉鐣ラ粦璇█缈昏瘧鍣ㄣ€嬩笂GitHub鐑锛屼腑骞寸綉鍙嬬粓浜庣湅鎳傚勾杞讳汉鐨刟wsl