标签搜索
隐藏侧边栏

超好用的纯CSS动画库

搞前端的半夏
2022-05-11 / 0 评论 / 0 点赞 / 12 阅读 / 1,092 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-05-11,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

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

前言

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

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

image-20211109225112457

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

image-20211109230952501

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

1 cssanimation.io

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

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

image-20211109231612171

CSShake

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

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

image-20211109232310468

Animatopy

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

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

image-20211109232828139

Animista

https://animista.net/

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

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

image-20211109233211131

其他

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

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

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

0

评论区