工具集合 ​

CSS ​

• loading.io

  获取 css 和 html 源码，快速实现好看的加载动画

• uiverse.io

  直接获取动画效果的 css 和 html 源码

• Flat UI Colors

  颜色选择器

• open-props

  open-props 可以作为辅助 tailwind-css 的工具，提供了很多的 css 颜色方面的变量

• Animate.css

  经典好看、简单动画库

• Magic Effect

  酷炫类型的动画库

• Hover.css

  鼠标悬停动画库

• csshake.css

  抖动动画库

• Animista

  不想引入动画库时，自定义配置生成代码的工具

• wow.js

  滚动动画

• granim.js

  背景渐变动画

• canvas-confetti

  撒花效果

• Rough Notation

  非常好看的手绘风格动画。主要针对文本

JS ​

• hotkeys-js

  快速实现监听键盘按键事件、组合键事件

  ts

  useEffect(() => {
  	hotkeys('ctrl+j', e => {
  		e.preventDefault()
  	})
  	hotkeys('escape', function (e) {
  		e.preventDefault()
  	})
  }, [])

  useEffect(() => {
  	hotkeys('ctrl+j', e => {
  		e.preventDefault()
  	})
  	hotkeys('escape', function (e) {
  		e.preventDefault()
  	})
  }, [])

Git ​

• gitmoji.dev

  代码提交时显示丰富小图标信息

• Learn Git Branching

  学习 git 指令的网站。一关卡一关卡熟悉每个指令的含义。

图片压缩 ​

• https://www.67tool.com/images/imgConvert?to=avif

  图片转为 avif，压缩效率极佳，但部分浏览器存在兼容问题不能展示

• TinyPng

  图片压缩网站

• 图快压

• snow-tiny

  自动化压缩图片工具

做图（海报） ​

• Logoly.Pro

  挖掘机风格海报

• Pexels

  高清免费素材图片

• 诺基亚表情包生成器

  诺基亚斗图表情包

• 在线 PS

  线上 ps，做一些简单的图很方便

数据库 ​

• planetscale

一款白嫖数据库，免费 5G 空间。非常适合学习，需要科学上网。速度上也会相对慢一点。

主题 ​

• realtimecolors

一个主题网站配色的神器，可以非常方便我们做一些主题更改时的一些方案推荐

• 墨滴

markdown 多款 markdown 主题，很方便作为微信公众号等文章模板

图片文本识别 ​

• tesseract.js

帮助我们识别图片中的文字，但是对图片要求比较高，需要图片文字比较干净，没法用于破解图片验证码

语言 ​

• pi.ai

ai 语音平台，能够实现口语与文字交流。

AI 工具 ​

• 文本转图片 AI 免费生成器

Monica 出品的文本转图片生成器，可以生成一些好看的图片

UI 组件库 ​

• shadcn

React 的 C 端组件库，原生支持 tailwindCSS