首页 前端知识 20个很好用的 CSS 动画库

20个很好用的 CSS 动画库

2024-10-28 20:10:35 前端知识 前端哥 694 846 我要收藏

分享 20 个最佳 CSS 动画库。

它们中的大多数将生成纯 CSS 代码,而不需要任何外部库。

1.Animate.css

一个开箱即用型的跨浏览器动画库,可供你在项目中使用。

在这里插入图片描述

2.Magic Animations CSS3

一组简单的动画,可以包含在你的网页或应用项目中。

在这里插入图片描述

3.Animista - On-Demand CSS Animations Library

一个 CSS 动画库,你可以在这里玩转现成的 CSS 动画集合,并只下载你将使用的动画。

在这里插入图片描述

4.Hamburgers by Jonathan Suh

一组“美味”的 CSS 动画汉堡图标。还包括作为 Sass 库的源代码。

在这里插入图片描述

5.Whirl: CSS loading animations with minimal effort!

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

在这里插入图片描述

6.Three Dots

一组仅使用单个元素制作的 CSS 加载动画。

在这里插入图片描述

7.mimic.css

开源 CSS 文本动画的集合。

在这里插入图片描述

8.Hover.css - A collection of CSS3 powered hover effects

CSS3 驱动的悬停效果集合,可应用于链接、按钮、徽标、SVG、特色图像等。

在这里插入图片描述

9.CSS Animation Kit

一个纯 CSS 和基于 HTML 的动画套件。

在这里插入图片描述

10.LDRS — UI Ball

一个免费的开源加载器和旋转器库。

在这里插入图片描述

11.

AnimatiSS - A nice, colorful collection of CSS animations for your projects

AnimatiSS 是一个预览自定义 CSS 动画的工具,只需单击一下即可获取其代码,将其粘贴到您自己的 Web 项目中。

在这里插入图片描述

12.Granim.js - Gradient Animations

使用这个小型 JavaScript 库创建流畅且交互式的渐变动画。

在这里插入图片描述

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

轻松创建高度可定制的粒子、彩纸屑和烟花动画,并将它们用作网站的动画背景。

在这里插入图片描述

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

只需几行代码即可制作动画网站背景。

在这里插入图片描述

15.imagehover.css

精心制作的 CSS 库,可让您轻松实现可缩放的图像悬停效果。

在这里插入图片描述

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

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

在这里插入图片描述

17.Epic Spinners

与 Vue.js 集成,易于使用的 CSS spinners 集合。

在这里插入图片描述

18.SpinKit | Simple CSS Spinners

使用 CSS 制作动画的简单加载旋转器。

在这里插入图片描述

19.particles.js

用于创建粒子的轻量级 JavaScript 库。

在这里插入图片描述

20.​​​​​​​CSShake

易于使用的类库,将为你网站的每个部分添加不同类型的抖动效果。

在这里插入图片描述

总结完毕,感觉收藏起来吧!感谢!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19378.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!