您的当前位置:首页>全部文章>文章详情

超30个好用的css动画库合集

发表于:2024-09-23 17:49:57浏览:1908次 TAG: #动画 收藏

1. Animate.css

网址:https://animate.style/
Animate.css 提供了大量预设的动画效果,简单易用,常用于元素的进入和退出动画。

2. Hover.css

网址: https://ianlunn.github.io/Hover/

Hover.css 专注于鼠标悬停时的动画效果,适用于按钮、图片等交互元素。

 

 

3. CSShake

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

CSShake 提供了多种震动效果,适合用于警告、强调等场景。

 

 

4. AniJS

网址: https://anijs.github.io/

AniJS 是一个声明式动画库,允许你通过 HTML 语法轻松定义动画,无需编写 JavaScript。

 

 

5. Lottie

网址: https://airbnb.io/lottie/

Lottie 允许开发者将高质量的 SVG 动画嵌入网页中,适合复杂的交互设计。

 

 

6. Animista - On-Demand CSS Animations Library

网址: https://animista.net/

Animista 提供多种预设动画效果,用户可以在线定制和生成动画代码。

 

 

7. Hover Effect Ideas

网址: https://tympanus.net/Development/HoverEffectIdeas/

Hover Effect Ideas 提供了多种创意的鼠标悬停动画效果。

 

 

 

8. Mo.js

网址: https://mojs.github.io/

Mo.js 提供了强大的动画工具,支持复杂的时间轴和多段动画控制。

 

 

9. Hamburgers

网址: https://jonsuh.com/hamburgers/

Hamburgers 是专注于汉堡菜单按钮动画的库,适合移动端应用。

 

 

10. Loaders.css

网址: https://github.com/ConnorAtherton/loaders.css

Loaders.css 是一个轻量的加载动画库,提供了丰富的加载动画样式。

 

 

11. SpinKit

网址: https://tobiasahlin.com/spinkit/

SpinKit 提供多种 CSS 加载动画,适用于网页加载状态指示。

 

 

 

12. CSS Animation.io

网址: https://cssanimation.io/

cssanimation.io 是一个在线动画库,提供多种进入、退出、悬停等效果。

 

 

13. Tuesday

网址: https://shakrmedia.github.io/tuesday/

Tuesday 是一个轻量的动画库,提供类似 Animate.css 的动画效果。

 

 

 

14. Typed.js

网址: https://github.com/mattboldt/typed.js/

Typed.js 是一个提供打字机效果的动画库,适合动态文本展示。

 

 

15. WOW.js

网址: https://wowjs.uk/

WOW.js 与 Animate.css 搭配使用,实现滚动触发的动画效果。

 

 

 

16. Effeckt.css

网址: https://h5bp.github.io/Effeckt.css/

Effeckt.css 是一个开源动画库,专注于移动端的过渡和交互效果。

 

 

17. Magic CSS3 Animations

网址: https://www.minimamente.com/project/magic/

Magic CSS3 Animations 提供了丰富的动画效果,适合提升网页的视觉冲击力。

 

 

18. Textillate.js

网址: http://textillate.js.org/

Textillate.js 是一个专注于文本动画的库,允许你为文字添加多种动态效果。

 

 

19. Sequence.js

网址: https://www.sequencejs.com/

Sequence.js 是一个提供平滑内容切换效果的动画库,适用于内容展示和滑动效果。

 

 

20. mimic.css

网址:https://erictreacy.github.io/mimic.css/

 

 

21. Imagehover.css

网址:https://imagehover.io/

 

 

22. CSS Animation Kit

网址:https://angrytools.com/css/animation/

 

 

23. LDRS - UI Ball

网址:https://uiball.com/ldrs/

 

 

24. AnimatiSS

网址:https://xsgames.co/animatiss/

 

 

25. Granim.js - Gradient Animations

网址:https://sarcadass.github.io/granim.js/

 

 

 

26. tsParticles | JavaScript Particles, Confetti and Fireworks animations for your website

网址:https://particles.js.org/

 

 

27. Vanta.js - Animated 3D Backgrounds For Your Website

网址:https://www.vantajs.com/

 

 

28. Moving Letters | Text animated with JavaScript & anime.js

网址:https://tobiasahlin.com/moving-letters/

 

使用 JavaScript 和 Anime.js 的文本动画集合。

 

 

29. Epic Spinners

网址:https://epic-spinners.vuestic.dev/

仅限CSS。易于使用。VueJS集成。

 

 

30. particles.js

网址:https://vincentgarreau.com/particles.js/

 

轻量级的JavaScript库,适合设置动态背景。

 

 

 

31. Keyframes.app

网址:https://keyframes.app/

 

一款基于时间关键帧,在线制作网页动画的网站,你无需在编辑器和浏览器直接互相切换,及所见即所得。keyframes.app提供在线制作和谷歌浏览器扩展插件两种形式。

 

 

32. lightGallery

网址:https://www.lightgalleryjs.com/

一个轻量级、模块化的JavaScript图像和视频灯箱库插件。适用于React.js、Vue.js、Angular和TypeScript。

 

 

33. Whirl: CSS loading animations with minimal effort!

网址:https://whirl.netlify.app/

一组 CSS 加载动画,示例包括:弧形、基础型、弹跳、追逐、颜色范围、色轮、不同行方向、点等。

 

 

 

34. Three Dots

网址:https://nzbin.github.io/three-dots/

Three Dots是一组仅用单个元素制作的CSS加载动画。这个项目不仅能提高你的CSS技能,还能激发你的想象力。

 

 

通过使用这些 CSS 动画库,可以轻松为网页增加各种有趣的动画效果。每个库都有不同的特点和适用场景,选择适合你的项目的动画库,将大大提升开发效率和用户体验。

 

 

 

Hi 小闻

可以咨询展会的任何问题哦 关闭