目錄
CSS代碼生成器
CSS3 Generator
終極CSS Generator
CSS Grid布局生成器
靜態(tài)站點(diǎn)生成器
Next.js
Gatsby
SVG 優(yōu)化器
SVGOMG
SVG Optimizers
動(dòng)畫庫
Animate.css
GreenSock (GSAP)
Anime.js
跨瀏覽器測試
Caniuse
Am I Responsive?
Responsive Web Design Checker
BrowserStack
代碼協(xié)作和游樂場
GitHub
CodePen
JSFiddle
SoloLearn
jsrun.net
CSS代碼生成器
你是否曾經(jīng)嘗試記住如何聲明漸變刊懈，文本陰影澈蟆，F(xiàn)lexbox或Grid的CSS屬性疚颊，僅舉幾例？不容易。除非你一再使用某些CSS功能及其屬性，否則很難記住所有這些功能。但是，即使是精通CSS的人有時(shí)也需要對某些屬性進(jìn)行復(fù)習(xí)烙博，尤其是如果他們有一段時(shí)間沒有使用它們了瑟蜈。
如果你需要一些最新和最偉大的CSS的快速幫助，這里有CSS生成器來拯救渣窜。輸入數(shù)值铺根，預(yù)覽結(jié)果，抓取生成的代碼并運(yùn)行乔宿。
CSS3 Generator
https://css3generator.com/
CSS3 Generator是一款免費(fèi)的在線應(yīng)用位迂，它可以讓你快速編寫一些現(xiàn)代CSS功能的代碼，如Flexbox详瑞、漸變掂林、過渡和變換等。
輸入所需的CSS值坝橡，實(shí)時(shí)預(yù)覽結(jié)果泻帮，復(fù)制并粘貼生成的代碼。此外计寇，此應(yīng)用程序還會(huì)顯示支持CSS代碼的瀏覽器及其版本的列表锣杂。
終極CSS Generator
https://webcode.tools/css-generator
CSS Generator是一個(gè)免費(fèi)的在線應(yīng)用程序，可讓您生成CSS動(dòng)畫番宁，背景元莫，漸變，邊框蝶押，濾鏡等的代碼踱蠢。
界面友好，你感興趣的CSS功能的瀏覽器支持信息清晰易發(fā)現(xiàn)棋电，生成的代碼干凈準(zhǔn)確朽基。
CSS Grid布局生成器
https://css-grid-layout-generator.pw/
CSS Grid非常棒布隔，用代碼創(chuàng)建網(wǎng)格可以讓你完全控制最終的結(jié)果。然而稼虎，在你編碼的時(shí)候衅檀，有一個(gè)可視化的網(wǎng)格表示是很有幫助的。雖然一些主要的瀏覽器已經(jīng)實(shí)現(xiàn)了很好的工具來讓你可視化你的網(wǎng)格霎俩，但一些開發(fā)人員可以做一些額外的幫助哀军。這是CSS Grid生成器可能派上用場的地方。
Dmitrii Bykov編寫的CSS Grid Layout Generator是免費(fèi)的打却，可以在線訪問杉适，并且非常靈活。我試了一下柳击，發(fā)現(xiàn)它在網(wǎng)格容器級(jí)別和網(wǎng)格項(xiàng)目級(jí)別上為我提供了很多控制猿推，同時(shí)為我提供了不錯(cuò)的預(yù)覽功能和簡潔的代碼。
如果你需要幫助捌肴，請單擊“如何使用（How to Use）”按鈕蹬叭，然后觀看應(yīng)用作者提供的演示視頻。
靜態(tài)站點(diǎn)生成器
靜態(tài)網(wǎng)站生成器代表
…在使用手動(dòng)編碼的靜態(tài)網(wǎng)站和完整的CMS之間進(jìn)行折衷状知， 同時(shí)保留兩者的好處秽五。本質(zhì)上，會(huì)生成一個(gè) 靜態(tài)的純HTML網(wǎng)站饥悴，使用類似CMS的概念（例如模板）坦喘。可以從數(shù)據(jù)庫中提取內(nèi)容西设，但是更典型地瓣铣， 使用Markdown文件。
這是StaticGen網(wǎng)站上列出的前兩個(gè)靜態(tài)網(wǎng)站生成器贷揽。
Next.js
https://nextjs.org/
Next.js是一個(gè)免費(fèi)的開源框架坯沪，用于靜態(tài)導(dǎo)出的React應(yīng)用。其特點(diǎn)包括：
預(yù)渲染（Next支持服務(wù)器端渲染）
零配置
可擴(kuò)展性
CSS-in-JS
很棒的文檔
和更多擒滑。
Gatsby
https://www.gatsbyjs.org/
Gatsby是基于React的免費(fèi)開源框架腐晾，可幫助 開發(fā)人員建立快速的網(wǎng)站和應(yīng)用程序。
Gatsby 提供了大量功能丐一，例如：
React藻糖，webpack，現(xiàn)代JavaScript和CSS的強(qiáng)大功能
豐富的數(shù)據(jù)插件生態(tài)系統(tǒng)
漸進(jìn)式Web應(yīng)用程序生成
超級(jí)簡單的部署
為不同的用例定制的預(yù)先打包的Gatsby站點(diǎn)
和更多库车。
SVG 優(yōu)化器
網(wǎng)絡(luò)上的性能至關(guān)重要：訪問者在等待內(nèi)容加載時(shí)會(huì)不耐煩巨柒，搜索引擎往往會(huì)懲罰速度緩慢的網(wǎng)站。
優(yōu)化圖形是構(gòu)建快速網(wǎng)站和應(yīng)用程序的必要步驟，SVG圖形也不例外洋满。為確保SVG代碼干凈整潔晶乔，使用SVG優(yōu)化器已成為前端開發(fā)人員工作流程中必不可少的步驟。
以下是兩個(gè)出色的SVG優(yōu)化器牺勾，它們被專業(yè)開發(fā)人員廣泛使用正罢。
SVGOMG
https://jakearchibald.github.io/svgomg/
SVGOMG是一個(gè)免費(fèi)的在線應(yīng)用程序，可讓你將許多優(yōu)化選項(xiàng)應(yīng)用于SVG代碼并預(yù)覽最終結(jié)果驻民。易于使用翻具，也可以離線使用。
SVG Optimizers
https://petercollingridge.appspot.com/svg-optimiser
這是另一個(gè)很棒的免費(fèi)在線SVG優(yōu)化工具回还，可用于修剪SVG代碼裆泳，它直觀易用。
動(dòng)畫庫
動(dòng)畫在網(wǎng)絡(luò)上隨處可見柠硕，無論是微妙的微效果工禾，還是大塊內(nèi)容在屏幕上逐漸展開的故事性運(yùn)動(dòng)，都是動(dòng)畫的存在蝗柔。
雖然現(xiàn)代的CSS和JavaScript包含了你創(chuàng)建一些酷炫的網(wǎng)頁動(dòng)畫所需的功能闻葵，但下面列出的庫肯定能讓你更快地完成工作，并獲得一些驚人的效果诫咱。
Animate.css
https://animate.style/
Animate.css是一個(gè)可在你的Web項(xiàng)目中使用的即用型跨瀏覽器動(dòng)畫庫笙隙。非常適合強(qiáng)調(diào)洪灯，首頁坎缭，滑塊和引導(dǎo)注意的提示。
顧名思義签钩，這個(gè)庫是純CSS的掏呼。在預(yù)包裝的效果中，你會(huì)發(fā)現(xiàn)：像彈跳和閃爍效果铅檩、后方入口和出口憎夷、淡入和淡出等引人注意的效果，以及其他大量的效果。
功能包括：
使用npm，Yarn或CDN快速安裝
使用方便簡單
使用CSS自定義屬性（CSS變量）自定義動(dòng)畫持續(xù)時(shí)間到踏，延遲和交互的選項(xiàng)
用于延遲巍糯、速度變化和重復(fù)的實(shí)用類。
GreenSock (GSAP)
https://greensock.com/
GSAP（GreenSock動(dòng)畫平臺(tái)）提供“針對現(xiàn)代網(wǎng)絡(luò)的超高性能肆捕，專業(yè)級(jí)動(dòng)畫”。
其高度直觀的JavaScript驅(qū)動(dòng)的語法使你可以立即構(gòu)建出色的動(dòng)畫。從DOM元素和JavaScript對象到SVG额衙，Canvas和WebGL身臨其境的體驗(yàn)，可以使用GSAP進(jìn)行動(dòng)畫制作的對象沒有任何限制。此外窍侧，GSAP是跨瀏覽器的县踢，并且向后兼容，并提供了出色的文檔和支持社區(qū)伟件。
Anime.js
https://animejs.com/
Anime.js 是一個(gè)輕量級(jí)的JavaScript動(dòng)畫庫硼啤，具有簡單而強(qiáng)大的API。它與CSS屬性锋爪，SVG丙曙，DOM屬性和JavaScript對象一起使用。
完全開源其骄，憑借其直觀的語法和出色的文檔亏镰，你可以立即使用Anime.js并開始運(yùn)行。
跨瀏覽器測試
開發(fā)人員無法控制要從哪種設(shè)備訪問其網(wǎng)站或應(yīng)用程序拯爽。在2019年索抓，超過一半的網(wǎng)絡(luò)流量來自移動(dòng)設(shè)備。從整體上看毯炮，屏幕尺寸從臺(tái)式機(jī)逼肯、平板電腦到智能手機(jī)和可穿戴技術(shù)都有所不同。
作為前端開發(fā)人員桃煎，確保網(wǎng)頁在任何屏幕尺寸下都可以使用是我們工作的核心組成部分篮幢。雖然沒有什么比得上直接在不同的瀏覽器和平臺(tái)上測試網(wǎng)站和應(yīng)用程序，但以這種方式覆蓋所有基礎(chǔ)不是我們大多數(shù)人的選擇为迈。下面列出的服務(wù)和應(yīng)用程序可以提供幫助三椿。
Caniuse
https://caniuse.com/
我不知道你是怎么想的，但當(dāng)我需要了解瀏覽器對任何HTML葫辐、CSS搜锰、SVG和JavaScript功能支持的最新信息時(shí)--無論這些功能是多么新奇或晦澀難懂——caniuse是我的首選網(wǎng)站。
你將獲得全球和特定國家/地區(qū)級(jí)別的最新統(tǒng)計(jì)結(jié)果耿战，以及有關(guān)特定問題蛋叼，資源等的信息。
Am I Responsive?
http://ami.responsivedesign.is/
這是一個(gè)免費(fèi)的在線應(yīng)用程序剂陡，可讓您快速檢查網(wǎng)站在不同屏幕尺寸下的外觀狈涮。
以下是功能列表：
你可以通過在文本框中輸入要測試的站點(diǎn)的URL，或從任何地方使用瀏覽器上的“Am I RWD”書簽來從該應(yīng)用程序的網(wǎng)站中使用該應(yīng)用程序鸭栖。
http://localhost/works歌馍。
可以在顯示你網(wǎng)站的每個(gè)設(shè)備上單擊并滾動(dòng)以進(jìn)行測試。
Responsive Web Design Checker
https://responsivedesignchecker.com/
Responsive Web Design Checker纤泵，即響應(yīng)式網(wǎng)頁設(shè)計(jì)檢查器骆姐，是另一個(gè)免費(fèi)的在線應(yīng)用镜粤，可以測試你的網(wǎng)站不僅在不同的屏幕尺寸上，而且在各種設(shè)備上的外觀玻褪。其中包括各種臺(tái)式機(jī)和筆記本電腦肉渴，Apple iPad Retina和Amazon Kindle Fire等平板電腦，以及Apple iPhone 6/7 Plus带射，三星Galaxy等智能手機(jī)同规。
BrowserStack
https://www.browserstack.com/
BrowserStack是一項(xiàng)受歡迎的付費(fèi)服務(wù)，可讓你在2000多種真實(shí)設(shè)備和瀏覽器上測試你的網(wǎng)站或應(yīng)用程序窟社。它開箱即用券勺，完全安全。
代碼協(xié)作和游樂場
以下是一些很棒的工具灿里，可讓您快速共享代碼关炼，原型和測試項(xiàng)目構(gòu)想。
GitHub
這個(gè)無需多言
CodePen
https://codepen.io/
CodePen已經(jīng)存在了很多年匣吊，并且受到前端開發(fā)人員社區(qū)的喜愛和廣泛使用儒拂，它非常適合嘗試概念，原型設(shè)計(jì)色鸳，學(xué)習(xí)編碼和代碼共享社痛。由其團(tuán)隊(duì)定義如下：
CodePen是一個(gè)社交化的開發(fā)環(huán)境。從本質(zhì)上講命雀，它允許你在瀏覽器中編寫代碼蒜哀，并在構(gòu)建時(shí)查看其結(jié)果。對于任何技能的開發(fā)人員來說吏砂，這是一個(gè)有用的和自由的在線代碼編輯器撵儿，特別是對于學(xué)習(xí)代碼的人來說，這是一個(gè)賦能赊抖。我們主要專注于前端語言统倒，例如HTML寨典，CSS氛雪，JavaScript和可轉(zhuǎn)化為這些內(nèi)容的預(yù)處理語法。
JSFiddle
https://jsfiddle.net/
JSFiddle 是一個(gè)在線IDE服務(wù)和在線社區(qū)耸成，用于測試和展示用戶創(chuàng)建和協(xié)作的HTML报亩、CSS和JavaScript代碼片段，即 "fiddles"井氢。它允許模擬AJAX調(diào)用弦追。2019年，JSFiddle根據(jù)編程語言（PYPL）人氣指數(shù)的搜索次數(shù)花竞，在全球和美國排名第二劲件，直接排在Cloud9 IDE之后掸哑，成為最受歡迎的在線IDE。
SoloLearn
https://www.sololearn.com/
SoloLearn是一個(gè)很棒的在線游樂場零远，可讓你測試HTML苗分，CSS和JavaScript代碼。它還免費(fèi)提供基本的編碼課程牵辣，以及供開發(fā)人員和學(xué)習(xí)者使用的論壇摔癣。
jsrun.net
https://jsrun.net/
這是一個(gè)國內(nèi)版的CodePen，強(qiáng)力推薦纬向！Codepen择浊、JSFiddle雖好，但是由于服務(wù)器在國外逾条，四度非常慢琢岩。而jsrun.net速度非常快师脂。
