前端在線工具

一、SVG在線製做編輯預覽工具

　　

　　SVG在線製做編輯預覽工具 ： https://www.bejson.com/ui/svg_editor/  （裏面包括不少前端經常使用的工具）

　　　　　　　　　　　　　　　  http://www.gaituba.com/svg/   （裏面包括不少前端經常使用的工具）

　　SVG WEB在線編輯器　：　http://www.86y.org/demo/svg/

二、CSS3 一些動畫，轉換的效果，應該是有在線工具能夠生成代碼的。（網上找找看）

　　http://www.css88.com/tool/css3Preview/Transform.html

三、flex彈性佈局  在線預覽效果

·　 http://www.css88.com/demo/flexbox-playground/ 

 四、CSS3 動畫

　　http://jeremyckahn.github.io/stylie/

　　http://www.25xt.com/html5css3/14308.html   （這裏有各類動畫的在線工具，包含有CSS3動畫的庫）

 五、可視化的正則表達式編輯工具   ：     https://www.csdn.net/article/2014-11-27/2822843-tools?reload=1

　　在線正則表達式測試　　：　　　https://c.runoob.com/front-end/854

　　　　　　　　　　　　　　　　http://tools.jb51.net/tools/regex.asp  (這個正則表達式測試包括m，換行的匹配)

 六、CSS選擇器 nth-child的演示   ：      http://nthmaster.com/

七、HTML5 Video Events and API  ：   https://www.w3.org/2010/05/video/mediaevents.html

八、JSON在線編輯器 ：http://www.bejson.com/jsoneditoronline/ 

九、RGB顏色值與十六進制顏色碼轉換工具 ：https://www.sioe.cn/yingyong/yanse-rgb-16/

十、javascript 變量名 正確與否 檢測網站：https://mothereff.in/js-variables

 

 

注：前端有一些工做是不須要本身很是熟練去使用的，有的工做很是簡單可是很浪費時間，這些工做大部分是能夠利用在線工具幫咱們很快解決的。

　　如：一、json數據的生成；二、CSS3的動畫以及轉化，若是要本身去寫代碼，經常須要去看文檔比較浪費時間（由於不經常使用），這個時候能夠藉助在線工具，跳到本身須要的效果，看CSS樣式都有哪些；等等。