大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，邀你进群，一起学习交流前端，成为更优秀的工程师～关注公众号：半夏话前端,了解更多前端知识！点我探索新世界！

前言

最近再开发个人博客遇到了许多好玩的事情，之前已经写了几篇关于开发个人博客遇到的问题的文章了，今天这篇文章也是！

这是我目前博客的logo，本来是渐变文字的，

后来感觉太花了们还是原色了。今天在开发新功能的时候，看着这几个字觉得原来越难受，这几个字也太无趣了吧！好歹也是个人博客，总感觉来点动画，才能配得上我的骚气！！！于是我就开始百度谷歌谷歌！最后发现了一个有趣的效果，我暂且把他叫做蛇形文字。还是蛮有趣的！

就像是波浪一眼，属实增采。CSS动画好些也难写，最主要看你的创意。奈何本人毫无创意，只能靠开源库啦。

1 cssanimation.io

https://cssanimation.io/getting-started.html

这个就是我上面提到的那个文字动画的来源，这个动画库主要是针对文字的动画库，像常见的波浪文字，打字机效果，抖动文字。都是有的。当然也有其他的动画，目前我个人博客的文字图画都是用的这个库，当然我只是部分引入，只使用我需要的。这个网站真的特别贴心，他会把代码给你贴出来，让你会用也会写！🐂🍺！！！

CSShake

https://elrumordelaluz.github.io/csshake/

这个动画库，看名字就知道是干啥的。抖动嘛。这个动画库提供了各种各样的抖动效果。我目前用的主要是项目展示卡片上，当用户鼠标放到卡片上，就会出现抖动效果。同样的我也是部分引入。这个动画库支持npm i csshake.

Animatopy

https://sarthology.github.io/Animatopy/

这个动画库是用了一年多年了，里面的动画很多!而且每个动画都有对应的详细代码。这样我们就不用引入整个CSS。主要复制我们需要的代码就可以了！

Animista

https://animista.net/

这个动画库，我要捶爆，他不仅将动画分类，而且还支持调整动画的各个属性，最后还贴心的生成代码。

一般更花哨的动画，我都来这里找！谁用谁说好！

其他

上面四个是我最常用的，每个动画库都有自己的针对方向。互相弥补。当然除了这几个还有其他的。

例如Animate.css，最多人用的动画库，经典的css动画库，目前github已经由77k的👍了！！！

还有一些用的少但是也比较好的，比如Minimamente CSS。不过我个人是上面那4个已经足够了！！！