首页 前端知识 八个解决你80%需求的CSS动画库

八个解决你80%需求的CSS动画库

2024-04-29 12:04:40 前端知识 前端哥 26 21 我要收藏

在学习和工作的过程中,我们总免不了要写各种各样的css动画,给某个部分添加动画效果,如果觉得自己写的动画效果单一乏味,不妨试试这8个CSS动画库,值得收藏使用。

一、hover.css
开箱即用的鼠标悬停动画,支持的动画类型有:

- 2D Transitions (2D过度)

- Background Transitions (背景过度)

- Icons Transitions (图标过度)

- Border Transitions (边框过度)

- Shadow and Glow Transitions(阴影过度)

- Speech Bubbles (气泡效果过度)

- Curls (卷积过度)

二、Animate.css

一款跨浏览器的简单便捷的CSS动画库

提供了非常丰富的动画效果,目前很多开源项目都用到了它

H5-Dooring和DooringX也内置了很多它的动画效果

三、Magic.css
gitLab

动画效果非常震撼,如果大家想做一个比较炫酷的网站,可以参考使用这款css库

四、CSShake.css
一个能够提供震动和晃动Dom元素的CSS库

在移动端模仿手机震动,QQ窗口震动

五、hint.css
一个用纯 css 和 html 实现的提示库. 体积超级小, 对于一些位置固定的提示场景, 非常有用,

不用担心包体积过大的烦恼~

六、kite.css
一个兼容性极好且灵活的布局 css 库. 使用inline-block,基于 OOCSS 和 MindBEMding, 可以

帮助我们快速构建组件.

七、Three Dots
Three Dots是一组CSS加载动画,它由三个点组成,而这些点仅由单个元素组成。

用法

只需创建一个div元素,并添加动画的名称

八、[Angrytools](https://angrytools.com/css/animation/) 如果使用不同的生成器,Angrytools实际上是一个集合,其中还包括CSS动画生成器。

它可能不像Animista那么复杂,这个站点还提供了一些自定义动画的特性,比如动画的持续时间或延迟。

还可以在其展示时间轴上添加自定义的keyframes,然后可以直接在其中编写代码。 另外,也可以编辑现有的。

当完成的时候,可以得到完整的动画代码,也可以下载它。 作者:咬着糖拽天下的程序猿 https://www.bilibili.com/read/cv18083989 出处:bilibili

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6593.html
标签
评论
发布的文章

什么是JSON 为什么使用它

2024-05-07 13:05:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!