文章目录
- 1. Animate.css
- 2. Hover.css
- 3. CSShake
- 4. AniJS
- 5. Lottie
- 6. Animista - On-Demand CSS Animations Library
- 7. Hover Effect Ideas
- 8. Mo.js
- 9. Hamburgers
- 10. Loaders.css
- 11. SpinKit
- 12. CSS Animation.io
- 13. Tuesday
- 14. Typed.js
- 15. WOW.js
- 16. Effeckt.css
- 17. Magic CSS3 Animations
- 18. Textillate.js
- 19. Sequence.js
- 20. mimic.css
- 21. Imagehover.css
- 22. CSS Animation Kit
- 23. LDRS - UI Ball
- 24. AnimatiSS
- 25. Granim.js - Gradient Animations
- 26. tsParticles | JavaScript Particles, Confetti and Fireworks animations for your website
- 27. Vanta.js - Animated 3D Backgrounds For Your Website
- 28. Moving Letters | Text animated with JavaScript & anime.js
- 29. Epic Spinners
- 30. particles.js
- 31. Keyframes.app
- 32. lightGallery
- 33. Whirl: CSS loading animations with minimal effort!
- 34. Three Dots
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
22. CSS Animation Kit
网址:https://angrytools.com/css/animation/
23. LDRS - UI Ball
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
27. Vanta.js - Animated 3D Backgrounds For Your Website
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
一款基于时间关键帧,在线制作网页动画的网站,你无需在编辑器和浏览器直接互相切换,及所见即所得。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 动画库,可以轻松为网页增加各种有趣的动画效果。每个库都有不同的特点和适用场景,选择适合你的项目的动画库,将大大提升开发效率和用户体验。