大家好,我是漫步,分享几个宝藏工具!
关注公众号 前端开发博客,回复“加群”
加入我们一起学习,天天进步
一、CSS布局生成器
Layout:https://layout.bradwoods.io/customize
它是一个全功能的 CSS 和 JSX 生成器,用于使用 CSS Grid 布局语法生成不同种类的布局,任意修改 Grid 的属性,并且实时展示画面,生成对应代码。当然还有 Flex布局(不过现在还不是很完善)
![2bf61ee85cf59a46ec022d25da7ea07b.png](https://i-blog.csdnimg.cn/blog_migrate/91db45d44e85ac4105183ed9e0663073.png)
二、Riju
Riju:https://riju.codes/
Riju 是一个继承了224种语言的在线代码运行平台,十分简洁,无广告,非常推荐
![c2e9109846b6d62f1d3d2d2e414b6fa6.png](https://i-blog.csdnimg.cn/blog_migrate/a55aaaa3dc67ccae10c2c6558cd4e5ac.png)
三、Whirl
Whirl:https://whirl.netlify.app/
Whirl 是一个CSS动画库,与其它的动画库不一样,它集合了108 种加载动画,简洁且独特,值得学习,所有的源代码也都能获取到!
![b86d63af5746172e70b2d38f73ae0b38.png](https://i-blog.csdnimg.cn/blog_migrate/3e0541c219895247ac46c9592b5bca18.png)
四、Pikaday
Pikaday:https://pikaday.com/
Pikaday 是一个日期选择器,无依赖、轻量(5k)、CSS模块化,样式也很简约,我特别喜欢,令人意外的是,它在Github上竟然斩获了7k+ Star
![eb8ddeab4db76c4acdcfd58a53bd7d97.png](https://i-blog.csdnimg.cn/blog_migrate/a494cc07f9e7ded4e115c799e546a7a3.png)
五、Tailwind Components
Tailwind Components:https://tailwindcomponents.com/
Tailwind Components 是一个 Tailwind UI 套件,这个网站是一个由社区贡献的各种 Tailwind 组件
![0687d2fa530e0b12a705cc6b8714d488.png](https://i-blog.csdnimg.cn/blog_migrate/63324f363d4d4c018c24c013bba49538.png)
六、Tail-Kit
Tail-Kit:https://www.tailwind-kit.com/
Tail-Kit 是第一个非常棒的 Tailwind UI组件库,它有超过250个开源组件,同时兼容 React、 Vue 和 Angular
![e1f65415cc5f676c2f673237ba9d7f38.png](https://i-blog.csdnimg.cn/blog_migrate/96d2eedcd3bfb2a36ae6ba8c021d23a9.png)
七、tidy.js
tidy.js:https://pbeshai.github.io/tidy/
tidy.js 是一个用于处理数据相关的 JavaScript 库,它包括70多个不同类别的函数(整理、分组、数学、排序等等)
![31aeec1d60096e206317e369726ce1cc.png](https://i-blog.csdnimg.cn/blog_migrate/af8fbb94745159529a06c039e1240fed.png)
八、party.js
party.js:https://party.js.org/
party.js 还蛮有意思的,你们应该见过很多博客网站,鼠标点击或拖动时会有很多炫酷的动效,这个库就是做这个的,你可以轻松地实现那些效果
![9431d7bc3a6c29e68a4a936c8789d494.png](https://i-blog.csdnimg.cn/blog_migrate/640f0877cc83035ee4a66a39b5be5550.png)
九、AI去背景
baseline:https://baseline.is/tools/background-remover/
baseline 是一款免费的通过AI来去除图片背景的工具网站,支持JPEG、PNG,最终会返回一个透明背景的PNG图片给你
![654fad1776779add8b6ee92f29a8aac1.png](https://i-blog.csdnimg.cn/blog_migrate/d47ba25b0f61cbb123f01c76e34836fb.png)
十、Layout patterns
Layout patterns:https://web.dev/patterns/layout/
Layout patterns 是 Google Developers 旗下开发者资源中新增的版块,里面列举了使用CSS构建布局UI,现在列举了11种布局~ 后续应该还会持续增加,探索更多可能,建议收藏
![5f103814be4d5e93ada45d52a0cf507c.png](https://i-blog.csdnimg.cn/blog_migrate/7e817ce0911ac325b1252985d5ece6dd.png)
十一、Lowdefy
Lowdefy:https://lowdefy.com/
Lowdefy 是一个开源的低代码框架,通过 YAML 来轻松构建 web 应用、管理面板、 BI 仪表板、工作流和 CRUD 应用
![ede5a3bfd78fd18ed4270d440b66c9c0.png](https://i-blog.csdnimg.cn/blog_migrate/8aa1c8a88f4aaa375df912e1c2d0cb36.png)
十二、uncut
uncut:https://uncut.wtf/
uncut 是一个现代字体目录网站,重点是开源,可免费用于个人和商用,看了一下总共收录了90种字体,任君挑选~
![b1f2502cc868054f0821e44eb1a435a1.png](https://i-blog.csdnimg.cn/blog_migrate/102aaccd75bc549877834bc066187ed9.png)
十三、fetoolkit
fetoolkit:https://www.fetoolkit.io/
fetoolkit 是一个前端开发工具箱,收录了20多种编码、图片相关的工具,包括 CSS、 JSON、图标、 SVG、图像压缩、 npm、 regex 等工具
![236d73a9c7b8b69bb14ac4729418de6e.png](https://i-blog.csdnimg.cn/blog_migrate/4bcddc7b825bdcf97d7a96af34edba55.png)
十四、Unicode Arrows
Unicode Arrows:https://unicodearrows.com/
Unicode Arrows 是一个收录了各式各样的箭头相关的十六进制代码
![0e1178c5a75219901454e8676d1bef07.png](https://i-blog.csdnimg.cn/blog_migrate/26a0bc351ace1d166194ec60512e2ab1.png)
十五、components AI
components AI:https://components.ai/
components AI 是一个主题构建器,包括语法高亮生成器、渐变、阴影工具、SVG 图案生成器、动画背景等等,全部都可以在线调试,非常好用
![b42e2d831424fd3cfb00c65435889752.png](https://i-blog.csdnimg.cn/blog_migrate/d158084c09ee99cbf9db5268ce9eaf11.png)
十六、Glitter
Glitter:https://wh0.github.io/glitter/
Glitter 是一个荧光字体生成器,项目不复杂,但很好看,我们可以随意修改文本,最后导出SVG
![c59f907148f2ca41fbc93df7e5a62832.png](https://i-blog.csdnimg.cn/blog_migrate/df090e6582c31eb5f60411e119701f47.png)
十七、Iconduck
Iconduck:https://iconduck.com/
Iconduck 是一个开源icon网站,拥有超过100,000个图标,可以通过关键字搜索,并且都可以在商业项目中使用
![64265711c11e88e14970a12a8afee5ef.png](https://i-blog.csdnimg.cn/blog_migrate/a2f04d7e58b6e06c61558cb6f7c23f0d.png)
十八、pattern-generator
pattern-generator:https://doodad.dev/pattern-generator/
pattern-generator 是一个帮助你生成背景图片的网站,就几十种图案可选,而且每种图案里的元素都可以通过交互按钮任意修改,最后可以导出 JPEG、 PNG、SVG 、CSS背景代码,也支持退出后恢复上一次操作的内容
![1e1040b4370e30aef2f912456815ce98.png](https://i-blog.csdnimg.cn/blog_migrate/00665fa5add98b82458e503455cdafe7.png)
十九、buttons-generator
buttons-generator:https://markodenic.com/tools/buttons-generator/
buttons-generator 是一个包含了很多种交互形式以及样式的按钮的网站,大概有**120+**种,对于有自定义按钮需求的小伙伴可以作参考
![18484bd31ec94862edeb8b362ccb9f9e.png](https://i-blog.csdnimg.cn/blog_migrate/555c509fb5b49c0cfe7bf7c54e7ef0e3.png)
二十、Coding Fonts
Coding Fonts:https://coding-fonts.css-tricks.com/fonts/hack/?language=html&theme=dark
Coding Fonts 是收集了45种代码字体的网站,大部分都是免费的,当然也有收费的,可以选个心仪的放到自己的编辑器里去(小声bb一句,我还是最喜欢JetBrains Mono
,免费又好看)
![9217444ad481242debeb438e1cf5cf95.png](https://i-blog.csdnimg.cn/blog_migrate/4b7560781df3f56d63609b30c6a78722.png)
二十一、svgrepo
svgrepo:https://www.svgrepo.com/
svgrepo 是一个 SVG 图标库,坐拥 300,000 + 免费使用的SVG图标,大部分也都是可以商用的。网站支持搜索,无需登录即可收藏(可能是存的localstorage)~
![ed32c277f31be06508e595c89c3faaf0.png](https://i-blog.csdnimg.cn/blog_migrate/c8e2f70163e7748b883bf427230c607a.png)
二十一、maplibre
maplibre:https://maplibre.org/
maplibre 是一个JavaScript世界地图库,开箱即用,同时也支持了IOS和Android的SDK
![051b79fc5121c9183685aacb1e50e4de.png](https://i-blog.csdnimg.cn/blog_migrate/90448152cc3713fadd6a2c01e29ed927.png)
二十二、Dopefolio
Dopefolio:https://github.com/rammcodes/Dopefolio
Dopefolio 是一个开箱即用的官网页面生成器,没有依赖一堆的三方开源库,全部是纯HTML、CSS,所以SEO做的非常好,Lighthouse分数也很高,同时支持页面响应式。有官网页面需求的小伙伴可以尝试使用
![a5a21139a0ecc14377039f64533a8f3c.png](https://i-blog.csdnimg.cn/blog_migrate/4b5aa9e298406b9621ce4934eec51ade.png)
END
家底都掏空了,希望对你们有所帮助。独乐乐不如众乐乐,如果你还有什么更推荐的网站或工具的话,可以在评论区留言~
- 完 -
推荐阅读
每日分享前端干货,欢迎关注!
回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
回复「Vue脑图」获取 Vue 相关脑图
回复「思维图」获取 JavaScript 相关思维图
回复「简历」获取简历制作建议
回复「简历模板」获取精选的简历模板
回复「加群」进入500人前端精英群
回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
回复「知识点」下载高清JavaScript知识点图谱
👍🏻 点赞 + 在看 分享给你的朋友