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

12、project wallace

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

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

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

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

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

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

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

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

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

13、DebuCSSer

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

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

14、Animated CSS burger

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

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

15、DropCSS

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

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

16、cssfx

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

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

17、CSS Grid Generator

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

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

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

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

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

18、Darkmode.Js

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

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

該插件具有以下特點：

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

能夠記住用戶的選擇

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

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

小節(jié)

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

總結(jié)

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

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