大家好，在一篇文章里 2020年讓人難以置信的50款前端新工具：JavaScript插件篇(一)，我分享了 11 款 JS 插件，本篇文章我將會(huì)和大家分享七款 CSS、HTML 相關(guān)的新工具。

12、project wallace

官網(wǎng)地址：https://www.projectwallace.com/

一款在線可視化統(tǒng)計(jì)分析項(xiàng)目中CSS代碼的工具，這款在線工具十分強(qiáng)大，方便你管理分析項(xiàng)目中的CSS代碼，并通過可視化的報(bào)表進(jìn)行呈現(xiàn)，報(bào)表功能主要包含以下內(nèi)容：

按照文件歷史版本統(tǒng)計(jì)代碼的行數(shù)、CSS規(guī)則、選擇器的使用情況、代碼的大小，并以可視化的報(bào)表進(jìn)行呈現(xiàn)。

比較CSS文件代碼的更改，并通過顏色提示選擇器的復(fù)雜性降低了多少。

幫你查找隱藏的css hack 和 !importants 的數(shù)量。

可視化的統(tǒng)計(jì)顏色的使用情況、字體的使用情況、媒介查詢的使用情況

可視化統(tǒng)計(jì)動(dòng)畫使用的情況

CSS命名規(guī)則的可視化歸類統(tǒng)計(jì)，幫你梳理歸類

其實(shí)功能不止這些，更多功能等待你的挖掘，此款工具唯一不足的地方就是只能免費(fèi)創(chuàng)建一個(gè)項(xiàng)目，如果需要?jiǎng)?chuàng)建更多的項(xiàng)目，你需要付錢。

13、DebuCSSer

官網(wǎng)地址：https://github.com/lucagez/Debucsser

DebuCSSer 是一款簡易版的CSS調(diào)試工具，通過線框的形式呈現(xiàn)網(wǎng)頁上的DOM元素，使用這款工具十分簡單，你可以按住 CTRL 鍵，然后使用鼠標(biāo)在頁面上進(jìn)行滑動(dòng) ，就會(huì)看到對應(yīng)元素被加上了線框，并顯示元素的寬高和對應(yīng)的class或id。當(dāng)你按住 CTRL + SHIFT 時(shí)，頁面上所有的元素都以線框的形式進(jìn)行呈現(xiàn)，方便你看元素與元素之間的關(guān)系。這些快捷鍵的設(shè)置當(dāng)然你可以自定義，包括線框樣式。

14、Animated CSS burger

官網(wǎng)地址：https://github.com/march08/animated-burgers

一款漢堡動(dòng)畫變換(三條橫線) 的CSS插件，說簡單點(diǎn)就是三個(gè)橫線的動(dòng)畫變換，我們在做導(dǎo)航的側(cè)滑菜單會(huì)經(jīng)常看到它，點(diǎn)擊圖標(biāo)變成叉號菜單打開，然后再次點(diǎn)擊叉號菜單關(guān)閉，恢復(fù)成三條橫線。這款插件除了可以變成叉號，還能對叉號的變換效果進(jìn)行細(xì)微控制，比如旋轉(zhuǎn)，擠壓、側(cè)滑、滑動(dòng)等效果。同時(shí)還能變成各種方向的箭頭。

15、DropCSS

官網(wǎng)地址：https://github.com/leeoniya/dropcss

一款快速高效、體積小(10KB)的清理未使用CSS代碼的插件。DropCSS將HTML和CSS作為輸入，僅返回使用的CSS作為輸出。它的自定義HTML和CSS解析器針對99％的用例進(jìn)行了高度優(yōu)化，從而避免了處理格式錯(cuò)誤的標(biāo)記或樣式表的開銷。

16、cssfx

官方網(wǎng)站地址：https://cssfx.netlify.com/

cssfx網(wǎng)站，匯集了許多常用的漂亮的動(dòng)畫小組件，比如按鈕點(diǎn)、鏈接的點(diǎn)擊滑動(dòng)效果，還有一些常用的loading動(dòng)畫小組件，這些小組件的代碼十分簡潔，只有CSS沒有JS，點(diǎn)擊對應(yīng)的組件，就會(huì)顯示對應(yīng)的源碼，很方便的集成到你的項(xiàng)目中。此項(xiàng)目中的代碼免費(fèi)開源并準(zhǔn)守MIT許可。

17、CSS Grid Generator

官方網(wǎng)站地址：https://cssgrid-generator.netlify.com/

通過這款在線工具，你可以設(shè)置行和列的數(shù)字還有單位，工具將為您生成一個(gè) CSS Grid 網(wǎng)格布局！在方框中拖動(dòng)來創(chuàng)建 div 放置在網(wǎng)格內(nèi)。

雖然這個(gè)項(xiàng)目可以為您提供一個(gè)基本的布局, 但是本項(xiàng)目不是對 CSS 網(wǎng)格功能的全面介紹。這只是一種快速使用 CSS Grid 網(wǎng)格布局功能的方法。

我注意到很多人沒有使用 Grid，因?yàn)樗麄冇X得這個(gè)太復(fù)雜了，難以理解。 Grid 可以做很多事情，而這個(gè)小的生成器只涉及到了一小部分功能。 這樣做的目的是讓人們能夠快速上手并創(chuàng)建更多有趣的布局。

順便在分享一個(gè)通過在線游戲的形式學(xué)網(wǎng)格布局的網(wǎng)站：https://cssgridgarden.com/

18、Darkmode.Js

官方網(wǎng)站地址：https://github.com/sandoche/Darkmode.js

花幾秒鐘你也能打造一款 白天/夜間 閱讀模式的網(wǎng)站，這個(gè)插件使用 css mix-blend-mode 的特性為你的網(wǎng)站添加夜間模式。只需要復(fù)制粘貼代碼在網(wǎng)頁上添加一個(gè)小部件就可以進(jìn)行白天和黑夜模式的切換，除了這種方式，你還可以編程的方式進(jìn)行使用。該插件是輕量級的，基于原創(chuàng)JS實(shí)現(xiàn)。同時(shí)它基于本地存儲的方式，記住你最后一次選擇的閱讀模式。

該插件具有以下特點(diǎn)：

窗口小部件自動(dòng)適應(yīng)窗口大小

能夠記住用戶的選擇

如果操作系統(tǒng)偏好設(shè)置為夜間黑暗深色主題的話，則自動(dòng)顯示為“夜間模式 ”(如果瀏覽器支持“ preferred-color-scheme”)

可以用編程的方式進(jìn)行實(shí)現(xiàn)，無需掛載小部件

小節(jié)

關(guān)于 CSS & HTML 工具的插件就分享到這里，如果你喜歡我的分享，麻煩給個(gè)關(guān)注、點(diǎn)贊加轉(zhuǎn)發(fā)哦，你的支持，就是我分享的動(dòng)力，在下篇文章我將和大家分享一些關(guān)于測試及數(shù)據(jù)相關(guān)的工具，敬請期待...

總結(jié)

以上是生活随笔為你收集整理的css画横线箭头_2020年你应该关注这50款前端热门工具：CSS HTML 工具篇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。