轉(zhuǎn)載自：微信公眾號 qianduan1024 前端開發(fā)的同名文章

原文：http://www.hongkiat.com/blog/css-code-generator-web-apps/

摘要：Web開發(fā)人員們總是在尋找可以幫助他們節(jié)省時(shí)間的捷徑。許多優(yōu)秀的開發(fā)人員工具都能提供這些功能，相比于以往，現(xiàn)在完成網(wǎng)頁開發(fā)的速度已經(jīng)提高了很多。

Web開發(fā)人員們總是在尋找可以幫助他們節(jié)省時(shí)間的捷徑。許多優(yōu)秀的開發(fā)人員工具都能提供這些功能，相比于以往，現(xiàn)在完成網(wǎng)頁開發(fā)的速度已經(jīng)提高了很多。隨著基于瀏覽器IDE的興起，Web開發(fā)已經(jīng)不再拘泥于桌面型電腦之上，你可以在任何一臺計(jì)算機(jī)上編寫代碼，甚至是在瀏覽器中對結(jié)果進(jìn)行實(shí)時(shí)測試。

免費(fèi)的在線代碼生成器幫你快速的完成網(wǎng)頁搭建和迭代。只要你確定自己需要那種代碼，剩下的事情就只是找到合適的工具了。我們總結(jié)了10個(gè)最受歡迎的CSS代碼生成工具，而且這些工具都可以供你免費(fèi)試用。

1、WAIT! Animate

在CSS動(dòng)畫之間創(chuàng)建自定義重復(fù)性暫停一直以來都是一件困難的事情。但是有了WAIT! Animate，你可以用它生成正確的代碼，來實(shí)現(xiàn)這個(gè)目標(biāo)。這是一個(gè)新出現(xiàn)的網(wǎng)頁應(yīng)用，不久之前這個(gè)工具的制造者Will Stone剛剛將其推薦給我。

每一個(gè)人都明白CSS過渡和動(dòng)畫延遲。但是這種延遲只會出現(xiàn)一次，那就是每次動(dòng)畫開始的時(shí)候。

WAIT! Animate可以讓你在每次動(dòng)畫重復(fù)的間隙設(shè)定一個(gè)自定義暫停，從而實(shí)現(xiàn)動(dòng)畫的無限期循環(huán)。這是一個(gè)非常獨(dú)特的CSS代碼生成器，它能夠讓你在無需重頭編寫代碼的情況下打造動(dòng)畫效果。

2、CSS3 Generator

CSS3 Generator是一個(gè)比較傳統(tǒng)的代碼工具，但是你可以將它運(yùn)用在每天的工作之中。這個(gè)網(wǎng)頁應(yīng)用有著超過10種不同的代碼生成器，例如CSS columns、box shadows，甚至還包括了更新的flexbox property。

可惜的是整個(gè)網(wǎng)頁應(yīng)用都是動(dòng)態(tài)應(yīng)用，而且運(yùn)行在一個(gè)單一的頁面之中。因此每一個(gè)獨(dú)立的生成器都沒有永久鏈接。但是它使用起來超級簡單，而且支持每一種主流瀏覽器。

在打開主頁之后，你只需要選擇你要使用哪一種生成器，對變量進(jìn)行一些調(diào)節(jié)，然后就可以復(fù)制代碼了。可以說，它集合了所有最好的代碼生成技巧。

3、ColorZilla Gradients

自定義CSS漸變是一件讓人頭疼的事情。你可以使用Sass打造自己的mixin，效果也還可以。但是如果你不會使用Sass，或者只是需要一個(gè)簡單的視覺編輯器，那么我推薦ColorZilla出品的Gradient Editor工具。

這是一個(gè)完全免費(fèi)的工具，而且擁有類似Photoshop一樣的視覺編輯器，可以生成漸變代碼。你可以通過在漸變箱中移動(dòng)滑塊的方式來改變色彩位置，并且生成CSS代碼。你也可以用它在漸變中添加或是移除顏色，并且改變方向。

4、CSS Type Set

你是否曾經(jīng)想過實(shí)驗(yàn)?zāi)撤N排版風(fēng)格，看看它看上去是什么樣？CSS Type Set就可以幫你完成這件事情。你只需要輸入一些文本，然后更新字體、字號、顏色、字間距和其他一些變量，一切就大功告成了。

所有內(nèi)容都可以實(shí)時(shí)顯示，新的排版在網(wǎng)頁上的樣子一目了然的出現(xiàn)在你面前。這個(gè)工具目前唯一的缺點(diǎn)，就是支持的字體不夠多。你也可以使用Google Web Fonts配合Webfont Tester，但是它并沒有任何CSS輸出功能。

5、Enjoy CSS

Enjoy CSS網(wǎng)頁應(yīng)用既是一個(gè)代碼生成器，也是一個(gè)視覺編輯器。你可以用它來創(chuàng)建各種網(wǎng)頁元素，例如按鈕、輸入框，同時(shí)給它們添加自定CSS3屬性。

你甚至可以用它來測試Adobe字體，并且給字體添加各種效果，來觀察它們在瀏覽器中的樣子。但是Enjoy CSS最好的功能則是gallery，里面有著許多免費(fèi)的代碼段，和預(yù)設(shè)的按鍵、輸入框和其他元素的模板。

6、Flexy Boxes

如果你連flexbox最基本的概念都不理解，那么你可以試試Flexy Boxes。里面講述了每一版flexbox之間的區(qū)別，以及渲染引擎對句法的解釋。

由于flexbox還是一個(gè)較新的東西，因此還沒有太多的網(wǎng)頁利用了這個(gè)功能。但

是當(dāng)你理解了它的工作原理之后，在開發(fā)項(xiàng)目的時(shí)候你就會輕松很多，并且為未來CSS flexbox布局鋪平了道路。

7、CSSmatic

CSSmatic也是一個(gè)涵蓋了多個(gè)生成器的網(wǎng)頁，它一共有四個(gè)獨(dú)立的部分：陰影、邊框半徑、噪音紋理和CSS漸變。相比于CSS3 Generator，這個(gè)網(wǎng)頁的選項(xiàng)較少，但是它為漸變生成器等工具提供了獨(dú)立的頁面URL。如果你只需要其中的一個(gè)工具，你可以將其獨(dú)立放進(jìn)收藏夾中。

CSSmatic是少數(shù)幾個(gè)包括了噪音生成器的網(wǎng)頁之一。所有東西都是在本地生成，你可以從Thumbr中拷貝生成背景的縮略圖，然后使用background-repeat和background-image屬性在CSS中重復(fù)。

8、Base64 CSS

前端開發(fā)人員都在開始接受base64代碼，因?yàn)橄啾扔趥鹘y(tǒng)圖像，它有著易用性高、對存儲空間要求較小等有點(diǎn)。Base64 CSS是一個(gè)免費(fèi)的代碼生成器，可以輸出原始的base6圖像代碼。

你只需要將計(jì)算機(jī)中的文件進(jìn)行上傳，剩下的事情交給這個(gè)網(wǎng)站就可以了。使用這個(gè)應(yīng)用，你可以增加網(wǎng)頁速度，并且減少頁面上的緩存元素。

9、Patternify

如果你不喜歡使用自己的背景圖像，那么為什么不創(chuàng)建一個(gè)呢？Patternify就是這樣一個(gè)免費(fèi)的CSS模式生成器，內(nèi)置了完整的視覺編輯器。所有東西都可以在瀏覽器上進(jìn)行管理，你所需要的只是網(wǎng)絡(luò)連接而已。

它的模式設(shè)計(jì)接口不是很多，但是它卻是一個(gè)pixel-by-pixel生成器。因此，如果你想要一個(gè)噪音模式，你可能需要用其他一些工具。但是Patternify卻可以自動(dòng)輸出圖像URL，并且為你提供base64代碼，你可以將其復(fù)制/剪切到你的CSS中。

10、CSS Button Generator

我習(xí)慣把最好的東西留在最后，這個(gè)最好的工具就是CSS Button Generator。這個(gè)工具可以給你提供大量的自定義按鈕庫，以及CSS代碼，你可以用它們來搭建你需要的東西。你也可以復(fù)制預(yù)置的按鈕，對它們進(jìn)行調(diào)整，并且儲存為模板。當(dāng)然你也可以從頭自己進(jìn)行設(shè)計(jì)。它內(nèi)置的視覺編輯器非常出色，提供了很多自動(dòng)以CSS屬性可供選擇。

后記

這些免費(fèi)的工具都經(jīng)過精挑細(xì)選的，可以幫你完成各種代碼生成工作。其他的一些工具也可以為你提供幫助，例如Saas mixins，但是我所推薦的都是一些網(wǎng)頁應(yīng)用，這意味著你只要有一臺電腦，并且接入互聯(lián)網(wǎng)，就可以隨時(shí)使用這些工具。在時(shí)間緊迫，自己的電腦又不在手邊的時(shí)候，這些工具可以發(fā)揮巨大的作用。