大家好,在一篇文章里 2020年讓人難以置信的50款前端新工具:JavaScript插件篇(一),我分享了 11 款 JS 插件,本篇文章我將會(huì)和大家分享七款 CSS、HTML 相關(guān)的新工具。 12、project wallace官網(wǎng)地址:https://www./ 一款在線可視化統(tǒng)計(jì)分析項(xiàng)目中CSS代碼的工具,這款在線工具十分強(qiáng)大,方便你管理分析項(xiàng)目中的CSS代碼,并通過(guò)可視化的報(bào)表進(jìn)行呈現(xiàn),報(bào)表功能主要包含以下內(nèi)容:
其實(shí)功能不止這些,更多功能等待你的挖掘,此款工具唯一不足的地方就是只能免費(fèi)創(chuàng)建一個(gè)項(xiàng)目,如果需要?jiǎng)?chuàng)建更多的項(xiàng)目,你需要付錢。 13、DebuCSSer官網(wǎng)地址:https://github.com/lucagez/Debucsser DebuCSSer 是一款簡(jiǎn)易版的CSS調(diào)試工具,通過(guò)線框的形式呈現(xiàn)網(wǎng)頁(yè)上的DOM元素,使用這款工具十分簡(jiǎn)單,你可以按住 CTRL 鍵,然后使用鼠標(biāo)在頁(yè)面上進(jìn)行滑動(dòng) ,就會(huì)看到對(duì)應(yīng)元素被加上了線框,并顯示元素的寬高和對(duì)應(yīng)的class或id。當(dāng)你按住 CTRL + SHIFT 時(shí),頁(yè)面上所有的元素都以線框的形式進(jìn)行呈現(xiàn),方便你看元素與元素之間的關(guān)系。這些快捷鍵的設(shè)置當(dāng)然你可以自定義,包括線框樣式。 14、Animated CSS burger官網(wǎng)地址:https://github.com/march08/animated-burgers 一款漢堡動(dòng)畫變換(三條橫線) 的CSS插件,說(shuō)簡(jiǎn)單點(diǎn)就是三個(gè)橫線的動(dòng)畫變換,我們?cè)谧鰧?dǎo)航的側(cè)滑菜單會(huì)經(jīng)??吹剿?,點(diǎn)擊圖標(biāo)變成叉號(hào)菜單打開,然后再次點(diǎn)擊叉號(hào)菜單關(guān)閉,恢復(fù)成三條橫線。這款插件除了可以變成叉號(hào),還能對(duì)叉號(hào)的變換效果進(jìn)行細(xì)微控制,比如旋轉(zhuǎn),擠壓、側(cè)滑、滑動(dòng)等效果。同時(shí)還能變成各種方向的箭頭。 15、DropCSS官網(wǎng)地址:https://github.com/leeoniya/dropcss 一款快速高效、體積?。?0KB)的清理未使用CSS代碼的插件。DropCSS將HTML和CSS作為輸入,僅返回使用的CSS作為輸出。它的自定義HTML和CSS解析器針對(duì)99%的用例進(jìn)行了高度優(yōu)化,從而避免了處理格式錯(cuò)誤的標(biāo)記或樣式表的開銷。 16、cssfx官方網(wǎng)站地址:https://cssfx./ cssfx網(wǎng)站,匯集了許多常用的漂亮的動(dòng)畫小組件,比如按鈕點(diǎn)、鏈接的點(diǎn)擊滑動(dòng)效果,還有一些常用的loading動(dòng)畫小組件,這些小組件的代碼十分簡(jiǎn)潔,只有CSS沒(méi)有JS,點(diǎn)擊對(duì)應(yīng)的組件,就會(huì)顯示對(duì)應(yīng)的源碼,很方便的集成到你的項(xiàng)目中。此項(xiàng)目中的代碼免費(fèi)開源并準(zhǔn)守MIT許可。 17、CSS Grid Generator官方網(wǎng)站地址:https://cssgrid-generator./ 通過(guò)這款在線工具,你可以設(shè)置行和列的數(shù)字還有單位,工具將為您生成一個(gè) CSS Grid 網(wǎng)格布局!在方框中拖動(dòng)來(lái)創(chuàng)建 div 放置在網(wǎng)格內(nèi)。 雖然這個(gè)項(xiàng)目可以為您提供一個(gè)基本的布局, 但是本項(xiàng)目不是對(duì) CSS 網(wǎng)格功能的全面介紹。這只是一種快速使用 CSS Grid 網(wǎng)格布局功能的方法。 我注意到很多人沒(méi)有使用 Grid,因?yàn)樗麄冇X(jué)得這個(gè)太復(fù)雜了,難以理解。 Grid 可以做很多事情,而這個(gè)小的生成器只涉及到了一小部分功能。 這樣做的目的是讓人們能夠快速上手并創(chuàng)建更多有趣的布局。 順便在分享一個(gè)通過(guò)在線游戲的形式學(xué)網(wǎng)格布局的網(wǎng)站:https:/// 18、Darkmode.Js官方網(wǎng)站地址:https://github.com/sandoche/Darkmode.js 花幾秒鐘你也能打造一款 白天/夜間 閱讀模式的網(wǎng)站,這個(gè)插件使用 css mix-blend-mode 的特性為你的網(wǎng)站添加夜間模式。只需要復(fù)制粘貼代碼在網(wǎng)頁(yè)上添加一個(gè)小部件就可以進(jìn)行白天和黑夜模式的切換,除了這種方式,你還可以編程的方式進(jìn)行使用。該插件是輕量級(jí)的,基于原創(chuàng)JS實(shí)現(xiàn)。同時(shí)它基于本地存儲(chǔ)的方式,記住你最后一次選擇的閱讀模式。 該插件具有以下特點(diǎn):
小節(jié) |
|