多年 CSS 动效积累 · 实用动画/特效/技巧集合
将多年前端开发积累的 CSS 动效/特效经验进行开源沉淀，包含加载动画、按钮效果、悬停效果、过渡效果、其他动画、CSS 技巧六大模块，从经典加载器到视觉技巧的完整集合，每个特效都是独立 HTML 文件，开箱即用，方便复制使用。
- 六大模块 - 加载动画 + 按钮效果 + 悬停效果 + 过渡效果 + 其他动画 + CSS 技巧，覆盖常见动效场景
- 开箱即用 - 每个特效都是独立 HTML 文件，复制即可直接用于项目
- 纯原生实现 - 不依赖任何框架和构建工具，HTML + CSS + 原生 JS
- 零外部依赖 - 无 CDN、无 npm，断网也能跑
- 效果即代码 - 左侧实时演示，右侧源码 + 说明，所见即所得
- 语法高亮 - 关键 CSS 代码高亮显示，关键字紫色、属性名粉色、值琥珀
- 详细注释 - 关键 CSS 属性都有"为什么这样写"的说明，而非堆砌参数
- 响应式适配 - 移动端单列布局，桌面端双栏展示
页面加载、数据请求时的等待反馈动画。
| 序号 | 效果 | 文件 | 说明 |
|---|---|---|---|
| 1 | 经典转圈加载 | loaders/spinner.html | border 旋转，4 种变体（默认/双环/反向/彩色） |
| 2 | 三点跳动加载 | loaders/dots.html | wave 动画，animation-delay 错开延迟 |
| 3 | 骨架屏加载 | loaders/skeleton.html | shimmer 渐变扫光，模拟内容区+头像+标题+段落 |
| 4 | 脉冲呼吸加载 | loaders/pulse.html | scale + opacity 循环，三层同心圆扩散 |
| 5 | 环形加载 | loaders/ring.html | 双环交错旋转，外环顺时针内环逆时针 |
| 6 | 条形加载 | loaders/bar.html | 5 根竖条高度波动，类似音频均衡器 |
| 7 | 轨道加载 | loaders/orbit.html | 小球沿圆轨道旋转，速度和大小不同 |
按钮交互的视觉增强效果。
| 序号 | 效果 | 文件 | 说明 |
|---|---|---|---|
| 8 | 涟漪点击效果 | buttons/ripple.html | Material 风格，点击位置生成圆形扩散 |
| 9 | 光泽扫过效果 | buttons/shine.html | ::before 伪元素 + skew 变换高光扫过 |
| 10 | 描边动画按钮 | buttons/border-draw.html | SVG stroke-dashoffset + CSS 描边双方案 |
| 11 | 渐变流光按钮 | buttons/gradient.html | background-position 动画 + hover 加速 |
| 12 | 按压缩放按钮 | buttons/scale-press.html | hover 放大，active 缩小回弹，阴影变化 |
| 13 | 颜色交换按钮 | buttons/swap-color.html | ::before + transform: scaleX 背景滑入 |
| 14 | 图标按钮 | buttons/icon-button.html | 箭头滑动淡入淡出，右侧出左侧入 |
鼠标悬停时的卡片/图片交互反馈。
| 序号 | 效果 | 文件 | 说明 |
|---|---|---|---|
| 15 | 卡片上浮 | hovers/card-lift.html | 阴影增强 + 边框变色 + 微位移 |
| 16 | 图片缩放 | hovers/image-zoom.html | overflow:hidden 裁剪放大 + 遮罩浮现标题 |
| 17 | 遮罩浮现 | hovers/overlay-reveal.html | 底部信息从下浮现，translateY + opacity |
| 18 | 倾斜卡片 | hovers/tilt-card.html | 3D 透视，perspective + rotateX/Y 跟随鼠标 |
| 19 | 文字揭示 | hovers/text-reveal.html | 下划线中心展开 + 文字从遮罩滑出 |
| 20 | 图标弹跳 | hovers/icon-bounce.html | hover 时图标上下弹跳，bounce 动画 |
| 21 | 边框展开 | hovers/border-expand.html | 边框从四角向中心扩展形成完整边框 |
元素状态切换的平滑过渡。
| 序号 | 效果 | 文件 | 说明 |
|---|---|---|---|
| 22 | 淡入滑动 | transitions/fade-slide.html | 淡入+位移，4 种方向（上/下/左/右）入场 |
| 23 | 折叠展开 | transitions/expand-collapse.html | 手风琴折叠，max-height 过渡 + 旋转图标 |
| 24 | 形态变化 | transitions/morph-shape.html | 圆形↔方形 border-radius 过渡 + 颜色渐变 |
| 25 | 卡片翻转 | transitions/rotate-flip.html | perspective + rotateY，正反面内容不同 |
| 26 | 缩放进出 | transitions/scale-in-out.html | 从 scale(0) 弹入/缩放出，带弹性效果 |
| 27 | 擦除过渡 | transitions/wipe.html | 4 种方向擦除显示，::before 遮罩滑动 |
数据展示与装饰性动画。
| 序号 | 效果 | 文件 | 说明 |
|---|---|---|---|
| 28 | 数字滚动 | animations/number-roll.html | 0 滚动到目标值，requestAnimationFrame 缓动 |
| 29 | 打字机效果 | animations/typewriter.html | CSS steps() + JS 字符串截取两种实现 |
| 30 | 浮动粒子 | animations/float-particle.html | 粒子向上浮动，多 div + 随机延迟/速度/大小 |
| 31 | 渐变背景流动 | animations/gradient-bg.html | background-position 循环动画 |
| 32 | 波浪文字 | animations/wave-text.html | 每个字符上下波动，延迟错开形成波浪 |
| 33 | 跑马灯 | animations/marquee.html | 文字横向无限滚动，首尾无缝衔接 |
| 34 | 进度条 | animations/progress-bar.html | 条纹动画 + 进度增长，indeterminate 和 determinate |
| 35 | 心跳动画 | animations/heartbeat.html | scale 缩放模拟心跳，两次快跳 + 停顿节奏 |
视觉表现类 CSS 技巧集合。
| 序号 | 效果 | 文件 | 说明 |
|---|---|---|---|
| 36 | 玻璃拟态 | tricks/glassmorphism.html | backdrop-filter 模糊 + 半透明白底 |
| 37 | 渐变文字 | tricks/gradient-text.html | background-clip:text + 动态渐变流动 |
| 38 | 混合模式 | tricks/blend-mode.html | mix-blend-mode 多种值叠加演示 |
| 39 | 霓虹光晕 | tricks/neon-glow.html | 多层 text-shadow 叠加发光 |
| 40 | 自定义光标 | tricks/custom-cursor.html | 圆形跟随光标，hover 变大变色，JS 实现 |
| 41 | 滚动捕捉 | tricks/scroll-snap.html | scroll-snap-type 实现全屏整屏滚动 |
| 42 | 文字描边 | tricks/text-stroke.html | -webkit-text-stroke 镂空文字，hover 填充 |
| 43 | CSS 瀑布流 | tricks/masonry.html | column-count 实现多列瀑布流布局 |
wjs-css-effects/
├── index.html # 导航首页
├── loaders/ # 加载动画（7 个）
│ ├── spinner.html # 经典转圈加载
│ ├── dots.html # 三点跳动加载
│ ├── skeleton.html # 骨架屏加载
│ ├── pulse.html # 脉冲呼吸加载
│ ├── ring.html # 环形加载
│ ├── bar.html # 条形加载
│ └── orbit.html # 轨道加载
├── buttons/ # 按钮效果（7 个）
│ ├── ripple.html # 涟漪点击效果
│ ├── shine.html # 光泽扫过效果
│ ├── border-draw.html # 描边动画按钮
│ ├── gradient.html # 渐变流光按钮
│ ├── scale-press.html # 按压缩放按钮
│ ├── swap-color.html # 颜色交换按钮
│ └── icon-button.html # 图标按钮
├── hovers/ # 悬停效果（7 个）
│ ├── card-lift.html # 卡片上浮
│ ├── image-zoom.html # 图片缩放
│ ├── overlay-reveal.html # 遮罩浮现
│ ├── tilt-card.html # 倾斜卡片
│ ├── text-reveal.html # 文字揭示
│ ├── icon-bounce.html # 图标弹跳
│ └── border-expand.html # 边框展开
├── transitions/ # 过渡效果（6 个）
│ ├── fade-slide.html # 淡入滑动
│ ├── expand-collapse.html # 折叠展开
│ ├── morph-shape.html # 形态变化
│ ├── rotate-flip.html # 卡片翻转
│ ├── scale-in-out.html # 缩放进出
│ └── wipe.html # 擦除过渡
├── animations/ # 其他动画（8 个）
│ ├── number-roll.html # 数字滚动
│ ├── typewriter.html # 打字机效果
│ ├── float-particle.html # 浮动粒子
│ ├── gradient-bg.html # 渐变背景流动
│ ├── wave-text.html # 波浪文字
│ ├── marquee.html # 跑马灯
│ ├── progress-bar.html # 进度条
│ └── heartbeat.html # 心跳动画
├── tricks/ # CSS 技巧（8 个）
│ ├── glassmorphism.html # 玻璃拟态
│ ├── gradient-text.html # 渐变文字
│ ├── blend-mode.html # 混合模式
│ ├── neon-glow.html # 霓虹光晕
│ ├── custom-cursor.html # 自定义光标
│ ├── scroll-snap.html # 滚动捕捉
│ ├── text-stroke.html # 文字描边
│ └── masonry.html # CSS 瀑布流
├── LICENSE # MIT 开源协议
└── README.md # 项目说明
直接访问 GitHub Pages 查看所有特效。
纯静态站点，无需安装依赖，直接用浏览器打开 index.html 即可。
或启动本地服务器（推荐 Node.js 方案）：
# Node.js（推荐）
npx http-server -p 8080
# 或
npx serve -l 8080每个特效页面都含"查看源码"按钮，点击展开关键 CSS 代码，直接复制到你的项目中：
<!-- 1. 复制 HTML 结构 -->
<div class="spinner"></div>
<!-- 2. 复制 CSS 样式 -->
<style>
.spinner {
width: 40px;
height: 40px;
border: 4px solid #eee;
border-top-color: #a855f7;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>| 颜色 | 色值 | 用途 |
|---|---|---|
| 主色紫 | #a855f7 | 主色调、强调链接 |
| 辅色粉 | #ec4899 | 辅助强调、渐变终点 |
| 强调琥珀 | #f59e0b | 高亮、标签 |
| 主渐变 | linear-gradient(135deg, #a855f7, #ec4899) | 按钮、装饰条 |
| 深底紫 | #1a0a2e | Hero 深色背景 |
| 中底紫 | #2d1b4e | Hero 过渡背景 |
| 分类 | 色值 | 用途 |
|---|---|---|
| loaders | #a855f7 | 紫色 |
| buttons | #ec4899 | 粉色 |
| hovers | #f59e0b | 琥珀 |
| transitions | #06b6d4 | 青色 |
| animations | #10b981 | 绿色 |
| tricks | #f97316 | 橙色 |
- HTML5 / CSS3 / 原生 JavaScript（ES5 兼容）
- 纯静态站点，无构建工具，无外部 CDN
- 兼容现代浏览器（Chrome、Firefox、Safari、Edge）
MIT © wjs 2018-2026