美文网首页CSS 世界
八个解决你80%需求的CSS动画库

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

作者: 前端末晨曦吖 | 来源:发表于2022-08-13 20:18 被阅读0次

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

点击打开视频讲解

在学习和工作的过程中,我们总免不了要写各种各样的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元素,并添加动画的名称

<div class="dot-elastic"></div>

八、Angrytools

如果使用不同的生成器,Angrytools实际上是一个集合,其中还包括CSS动画生成器。

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

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

当完成的时候,可以得到完整的动画代码,也可以下载它。

相关文章

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

    八个解决你80%需求的CSS动画库 点击打开视频讲解[https://www.bilibili.com/video...

  • 能解决 80% 需求的 10个 CSS动画库!

    1.Animista 网站地址:http://animista.net/ 网站描述:在线生成 css 动画 Ani...

  • 有用的Vue第三方库

    Animate.css - CSS动画库 Velocity.js - JS动画库 TweenJS - 状态过渡动画...

  • 动画类文章

    css3常用动画+动画库 vue2使用animate css

  • 值得了解一下的Javascript和CSS库

    我收集和整理了Javascript和CSS库,它们当中有UI库、动画特效、以及前端整套解决方案等等,希望对前...

  • web开发的一些资源干货

    前端库——前端开发,CSS3动画特效等。 CSS入门教程——本指南适合 CSS 的初学者 学习CSS布局——如果你...

  • 前端da

    资源不断更新中。。。 动画库 1.Animate.css 说明:一个简单易用的跨浏览器CSS动画库。 GitHub...

  • 前端资源大整理

    资源不断更新中。。。 动画库 1.Animate.css 说明:一个简单易用的跨浏览器CSS动画库。 GitHub...

  • animate.css的简单使用

    animate.css是很多前端开发都知道的一个基于css3 animation动画库,库中预设的动画效果几乎满足...

  • Vue -- 过渡和动画

    单组件过渡和动画 动画方案:css过渡和动画中自动用class;配合css第三方库如 Animate.css;在钩...

网友评论

    本文标题:八个解决你80%需求的CSS动画库

    本文链接:https://www.haomeiwen.com/subject/quaqgrtx.html