web-tools

外观

CSS 动画库大全

约 1603 字大约 5 分钟

2025-01-16

在网页设计中，动画不仅能增加页面的趣味性，更能提升用户的浏览体验。无论是加载动画、背景效果还是悬停特效，合理的动画能让页面变得生动有趣。这里整理了20款实用的CSS动画库，其中大多数都是纯CSS实现，简单易用，帮您轻松打造酷炫的动态效果！

通用动画库

Animate.css

特色功能：一个跨浏览器兼容的CSS动画库，提供多种动画效果，使用方便，适合各种项目。

访问网址：https://animate.style/

安装使用：

npm install animate.css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

Magic CSS Animations

特色功能：一个简单实用的动画集合，直接嵌入到网页或应用即可使用，无需复杂配置。

访问网址：https://www.minimamente.com/project/magic/

GitHub：https://github.com/miniMAC/magic

Animista

特色功能：汇集了大量的CSS动画效果，支持在线预览并下载需要的代码，节省开发时间。

访问网址：https://animista.net/

使用方式：在线选择动画效果，自定义参数，复制生成的CSS代码

加载动画

Whirl

特色功能：提供丰富的CSS加载动画，例如弧形、弹跳、追踪等，为等待状态增加视觉亮点。

访问网址：https://whirl.netlify.app/

GitHub：https://github.com/jh3y/whirl

Three Dots

特色功能：一款轻量的加载动画库，使用一个元素即可实现多种加载效果。

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

安装使用：

npm install three-dots

LDRS (Loaders)

特色功能：免费开源的加载动画库，包含旋转、跳跃等多种小动画，适合任何加载场景。

访问网址：https://uiball.com/ldrs/

GitHub：https://github.com/GriffinJohnston/ldrs

SpinKit

特色功能：一组CSS实现的加载小图标，简洁实用，适合多种类型的页面加载场景。

访问网址：https://tobiasahlin.com/spinkit/

使用方式：纯CSS实现，直接复制代码使用

Epic Spinners

特色功能：Vue.js集成的CSS加载动画，轻松实现各种动效加载图标，非常适合前端项目。

访问网址：https://epic-spinners.vuestic.dev/

安装使用：

# Vue 版本
npm install epic-spinners

悬停效果

Hover.css

特色功能：CSS3制作的悬停效果集合，适用于链接、按钮、LOGO等元素，让页面互动更生动。

访问网址：https://ianlunn.github.io/Hover/

安装使用：

npm install hover.css

imagehover.css

特色功能：专为图片设计的悬停动画库，让图片展示更具吸引力，适合电商、作品展示等场景。

访问网址：https://imagehover.io/

GitHub：https://github.com/ciar4n/imagehover.css

文字动画

Mimic.css

特色功能：一个开源的文字动画库，让文本展示更具动态效果，非常适合标题和标语。

访问网址：https://erictreacy.github.io/mimic.css/

GitHub：https://github.com/erictreacy/mimic.css

Moving Letters

特色功能：结合JavaScript和anime.js的文字动画库，特别适合打造吸引眼球的标题效果。

访问网址：https://tobiasahlin.com/moving-letters/

技术栈：anime.js + CSS

背景动画

Granim.js

特色功能：一个小巧的JavaScript渐变动画库，轻松创建流畅的背景渐变动画效果。

访问网址：https://sarcadass.github.io/granim.js/

安装使用：

npm install granim

tsParticles

特色功能：快速生成粒子、彩带、烟花等背景动画的库，非常适合节日和活动主题设计。

访问网址：https://particles.js.org/

安装使用：

npm install tsparticles

Vanta.js

特色功能：几行代码即可实现动感网站背景，非常适合展示和引导用户注意。

访问网址：https://www.vantajs.com/

安装使用：

npm install vanta

particles.js

特色功能：轻量级粒子效果库，能生成动感背景和炫酷的网页开场动画。

访问网址：https://vincentgarreau.com/particles.js/

GitHub：https://github.com/VincentGarreau/particles.js/

特殊效果

Hamburgers

特色功能：一组精美的汉堡菜单图标动画，适用于移动端和响应式网站设计，支持Sass定制。

访问网址：https://jonsuh.com/hamburgers/

安装使用：

npm install hamburgers

CSShake

特色功能：简单易用的震动效果CSS库，适合提醒和突显页面元素，让页面更具动态感。

访问网址：https://elrumordelaluz.github.io/csshake/

安装使用：

npm install csshake

动画工具

CSS Animation Kit

特色功能：一个纯CSS和HTML构建的动画工具包，操作简单，适合初学者使用。

访问网址：https://angrytools.com/css/animation/

使用方式：在线可视化编辑器，生成CSS动画代码

AnimatiSS

特色功能：动画预览工具，可一键获取CSS代码，方便将自定义动画效果应用到项目中。

访问网址：https://xsgames.co/animatiss/

使用方式：在线选择和自定义动画，复制生成的代码

使用建议

选择合适的动画库

  1. 简单项目：Animate.css、Magic CSS - 开箱即用，简单快捷
  2. 加载动画：SpinKit、Three Dots、LDRS - 轻量级，性能好
  3. 背景效果：particles.js、Vanta.js - 视觉冲击力强
  4. 交互效果：Hover.css、imagehover.css - 提升用户体验
  5. Vue项目：Epic Spinners - 原生Vue支持
  6. 定制需求：Animista、CSS Animation Kit - 在线编辑器

性能优化建议

  1. 按需加载：只引入需要的动画效果，避免加载整个库
  2. GPU加速：优先使用 transform 和 opacity 属性
  3. 减少重绘：避免改变布局相关的属性
  4. 使用 will-change：提前告知浏览器元素将发生变化
  5. 控制动画数量：同时运行的动画不宜过多

示例代码

使用 Animate.css

<h1 class="animate__animated animate__bounce">动画标题</h1>

<!-- 自定义动画时长 -->
<div class="animate__animated animate__fadeIn" style="--animate-duration: 2s;">
  内容区域
</div>

使用 Hover.css

<button class="hvr-grow">Grow</button>
<a href="#" class="hvr-sweep-to-right">Sweep To Right</a>

使用 particles.js

particlesJS('particles-js', {
  particles: {
    number: { value: 80 },
    color: { value: '#ffffff' },
    shape: { type: 'circle' },
    size: { value: 3, random: true },
    move: { enable: true, speed: 6 }
  }
});

相关资源

学习资源