素材牛VIP会员
# CSS工具库 #

实用的前端CSS工具库/技巧大集合

我们在做前端开发时,我们经常会将一些常用的代码块、功能块进行封装,为的是更好的复用。那么,被抽离出来独立完成功能,通过API或配置项和其他部分交互,便形成了插件。 下面这些是我在工作中积累的一些常用的前端开源插件,这里只是罗列出来,详细的用法各个插件官网都有介绍。
收录资源 15 个 2022年10月30日 蜗牛牛牛牛
资源列表(共15个) 新增资源

MoreToggles.css

2022年10月30日 综合评分:3 风三十breezi30
MoreToggles.css一个纯 CSS 库,为您提供各种好看的切换开关。

CSS多行截断字符并补充省略号

2023年03月16日 综合评分:2 西瓦的守护

CSS想实现截断字符(保留一定数量的文本),在以前多数是用

overflow:hidden; 
white-space:nowrap;
text-overflow:ellipsis; 
然后配合一个容器高度和宽度就结束了,但这种截断只能实现单行的截断。

如果想实现多行文本截断,则需要用下面代码

overflow:hidden; 
display: -webkit-box; /*改变容器模式*/
-webkit-line-clamp: 2;/*想保留多少行文本*/
-webkit-box-orient: vertical; /*咱们理解的行是水平的,但计算机TMD不知道,要告诉他,我说的行是垂直方向从上到下的*/

然后也要配合overflow:hidden,这个不要忘记,行了,以上。

对了不要忘了,上面说的,需要webkit内核浏览器才支持,但目前移动端浏览器大多数都支持这个属性,可能CSS标准再更新,就会取消前缀的写法了,但目前还是需要的。

Animate.css

2022年10月31日 综合评分:2 西瓦的守护
纯css的动画库,所以无论你前端使用什么框架,都可以非常方便的使用它,内置了超多的动画效果,并且预览起来也非常方便。
补充链接:CDN

CSS PIN

2022年10月30日 综合评分:2 钱筱米0784
CSS Spinners 和 Loaders – 模块化、可定制和单一的 HTML 元素代码。
补充链接:Github项目地址

Specificity Visualizer

2022年10月30日 综合评分:1 phm_2016
通过工具您可以通过鸟瞰图快速了解 CSS 文件中的选择器及其特性。

Particles.js

2022年10月30日 综合评分:1 阿丘阿阿阿
particles.js 用于创建粒子的轻量级 JavaScript 库。

Meanderer

2022年10月30日 综合评分:0 uncletoo
用于响应式 CSS 运动路径的 JavaScript 微型库!

Halfmoon

2022年10月30日 综合评分:0 逆天_兵团
具有内置暗模式和使用 CSS 变量的完全可定制性的前端框架;非常适合构建仪表板和工具。

Optimizt

2022年10月30日 综合评分:0 peipei
Optimizt用CLI命令去优化图像的工具。它可以压缩 PNG、JPEG、GIF 和 SVG 有损和无损,并为光栅图像创建 AVIF 和 WebP 版本。

Charts.css

2022年10月30日 综合评分:0 霍格茨向前跑
Charts.css 是一个用于数据可视化的开源 CSS 框架。
上一页12下一页