现代动画库

悬浮动画

一个平滑优雅的上下浮动效果，为界面增添生动的视觉层次。适用于需要突出显示的UI元素，让用户体验更加自然流畅。

完美适用于：

  • 功能引导图标
  • 重要操作按钮
  • 产品展示卡片

CSS 代码：

@keyframes float {
    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-20px);
    }
  }

  .float {
    animation: float 3s ease-in-out infinite;
  }

HTML 使用：

<div class="float">浮动的元素</div>

脉冲动画

平滑的缩放效果，用于吸引用户注意力。

建议用于：通知提醒、重要按钮、标记等

CSS 代码：

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

HTML 使用：

<div class="pulse">脉冲的元素</div>

抖动动画

快速的左右抖动效果，用于表示错误或需要注意。

建议用于：表单验证、错误提示等场景

CSS 代码：

@keyframes shake {
    0%,
    100% {
      transform: translateX(0);
    }

    25% {
      transform: translateX(-10px);
    }

    75% {
      transform: translateX(10px);
    }
  }

  .shake {
    animation: shake 0.5s ease-in-out infinite;
  }

HTML 使用：

<div class="shake">抖动的元素</div>

3D旋转

令人印象深刻的3D旋转效果，为界面添加空间感。

适用于：产品展示、加载动画、特效展示等

CSS 代码：

@keyframes rotate3d {
    0% { transform: perspective(1000px) rotateY(0deg); }
    100% { transform: perspective(1000px) rotateY(360deg); }
}

.rotate3d {
    animation: rotate3d 8s linear infinite;
    transform-style: preserve-3d;
}

HTML 使用：

<div class="rotate3d">3D旋转的元素</div>

发光效果

柔和的光晕效果，增添视觉层次感。

适用于：强调元素、状态指示、交互反馈等

CSS 代码：

@keyframes glow {
    0%, 100% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); }
    50% { box-shadow: 0 0 30px rgba(99, 102, 241, 0.6); }
}

.glow {
    animation: glow 3s ease-in-out infinite;
}

HTML 使用：

<div class="glow">发光效果的元素</div>

形态变换

平滑的形状变换效果，展现流动的设计感。

适用于：背景装饰、loading动画、状态切换等

CSS 代码：

@keyframes morph {
    0%, 100% { border-radius: 1rem; }
    50% { border-radius: 2rem; }
}

.morph {
    animation: morph 8s ease-in-out infinite;
}

HTML 使用：

<div class="morph">形态变换的元素</div>

聚光效果

优雅的聚光扫描效果，为界面添加动态光影。

适用于：卡片悬浮、按钮特效、页面过渡等

CSS 代码：

@keyframes spotlight {
  0%, 100% {
    background: radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, 0.2) 0%,
      transparent 50%);
  }
  50% {
    background: radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, 0.3) 0%,
      transparent 25%);
  }
}

.spotlight {
  animation: spotlight 3s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

HTML 使用：

<div class="spotlight">聚光效果元素</div>

弹性弹跳

富有弹性的跳跃效果，增添活力与趣味。

适用于：交互反馈、加载动画、强调元素等

CSS 代码：

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
  75% { transform: translateY(-15px); }
}

.bounce {
  animation: bounce 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

HTML 使用：

<div class="bounce">弹跳元素</div>

打字效果

模拟打字机效果，创造动态文本展示。

适用于：标题展示、文本输入、提示信息等

CSS 代码：

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

.typing {
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid currentColor;
  animation: typing 3s steps(30) infinite alternate;
}

HTML 使用：

<div class="typing">打字效果文本</div>

渐变流动

流动的渐变背景，营造动态视觉效果。

适用于：按钮背景、卡片装饰、状态指示等

CSS 代码：

@keyframes gradient-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-flow {
  background: linear-gradient(90deg, #4f46e5, #7c3aed, #0ea5e9);
  background-size: 200% 100%;
  animation: gradient-flow 3s ease infinite;
}

HTML 使用：

<div class="gradient-flow">渐变流动元素</div>

3D翻转

平滑的3D翻转动画，展现空间感。

适用于：卡片翻转、切换效果、过渡动画等

CSS 代码：

@keyframes flip {
  0% { transform: perspective(1000px) rotateX(0); }
  100% { transform: perspective(1000px) rotateX(360deg); }
}

.flip {
  animation: flip 3s ease-in-out infinite;
  transform-style: preserve-3d;
}

HTML 使用：

<div class="flip">翻转效果元素</div>

波浪扭动

柔和的波浪扭动效果，增添流动感。

适用于：加载状态、背景动画、装饰效果等

CSS 代码：

@keyframes wave {
  0% { transform: skewX(0deg); }
  25% { transform: skewX(15deg); }
  75% { transform: skewX(-15deg); }
  100% { transform: skewX(0deg); }
}

.wave {
  animation: wave 2s ease-in-out infinite;
}

HTML 使用：

<div class="wave">波浪效果元素</div>

弹性缩放

有弹性的缩放效果，提供生动的反馈。

适用于：点击反馈、强调动画、状态变化等

CSS 代码：

@keyframes elastic {
  0% { transform: scale(1); }
  25% { transform: scale(1.1); }
  50% { transform: scale(0.9); }
  75% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.elastic {
  animation: elastic 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

HTML 使用：

<div class="elastic">弹性缩放元素</div>

模糊渐入

平滑的模糊渐入效果，创造层次感。

适用于：页面切换、弹窗显示、内容加载等

CSS 代码：

@keyframes blur-in {
  0% { 
    filter: blur(20px);
    opacity: 0;
  }
  100% {
    filter: blur(0);
    opacity: 1;
  }
}

.blur-in {
  animation: blur-in 1s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

HTML 使用：

<div class="blur-in">模糊渐入元素</div>

故障效果

现代感的故障动画效果，增添科技感。

适用于：错误提示、特效展示、强调效果等

CSS 代码：

@keyframes glitch {
  0% {
    clip-path: inset(50% 0 30% 0);
    transform: translate(-5px, 5px);
  }
  50% {
    clip-path: inset(20% 0 60% 0);
    transform: translate(5px, -5px);
  }
  100% {
    clip-path: inset(40% 0 40% 0);
    transform: translate(0, 0);
  }
}

.glitch {
  animation: glitch 0.5s ease-in-out infinite;
  position: relative;
}

HTML 使用：

<div class="glitch">故障效果元素</div>

磁性吸附

模拟磁性吸附的动态效果，增强交互感。

适用于：悬浮交互、按钮动效、图标动画等

CSS 代码：

@keyframes magnetic {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(5px, -5px) rotate(5deg); }
  75% { transform: translate(-5px, 5px) rotate(-5deg); }
}

.magnetic {
  animation: magnetic 3s ease-in-out infinite;
}

HTML 使用：

<div class="magnetic">磁吸附元素</div>

霓虹发光

炫酷的霓虹灯发光效果，营造科技感和未来感。

适用场景：

  • 重点标题文字
  • 特殊状态提示
  • 强调性UI元素

CSS 代码：

@keyframes neon-pulse {
  0%, 100% {
    text-shadow: 
      0 0 7px var(--accent),
      0 0 10px var(--accent),
      0 0 21px var(--accent),
      0 0 42px var(--primary),
      0 0 82px var(--primary),
      0 0 92px var(--primary);
  }
  50% {
    text-shadow: 
      0 0 4px var(--accent),
      0 0 7px var(--accent),
      0 0 13px var(--accent),
      0 0 25px var(--primary),
      0 0 45px var(--primary),
      0 0 55px var(--primary);
  }
}

HTML 使用：

<div class="neon">霓虹文本</div>

液态波浪

流动的液态变形效果，为界面添加有机的动态感。

适用场景：

  • 加载状态指示
  • 背景装饰元素
  • 交互反馈效果

CSS 代码：

@keyframes liquid-wave {
  0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
  25% { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; }
  50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; }
  75% { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; }
  100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
}

HTML 使用：

<div class="liquid">液态元素</div>

全息投影

模拟全息投影的视觉效果。

适用场景：

  • 高科技产品展示
  • 特效背景
  • 重要信息展示

CSS 代码：

@keyframes hologram {
  0%, 100% {
    opacity: 1;
    filter: hue-rotate(0deg) saturate(1) brightness(1);
  }
  50% {
    opacity: 0.8;
    filter: hue-rotate(180deg) saturate(1.5) brightness(1.2);
  }
}

HTML 使用：

<div class="hologram">全息内容</div>

磁性悬浮

模拟磁场作用的悬浮效果，增强交互体验。

适用场景：

  • 悬浮菜单
  • 卡片交互
  • 按钮特效

CSS 代码：

@keyframes magnetic-float {
  0%, 100% {
    transform: translateY(0) translateX(0) rotate(0deg);
    filter: brightness(1);
  }
  25% {
    transform: translateY(-8px) translateX(4px) rotate(2deg);
    filter: brightness(1.1);
  }
  75% {
    transform: translateY(8px) translateX(-4px) rotate(-2deg);
    filter: brightness(0.9);
  }
}

HTML 使用：

<div class="magnetic-hover">磁性元素</div>

能量脉冲

能量场扩散效果，突出重要元素。

适用场景：

  • 通知提醒
  • 状态变化
  • 操作反馈

CSS 代码：

@keyframes energy-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4);
    transform: scale(1);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(79, 70, 229, 0);
    transform: scale(1.05);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
    transform: scale(1);
  }
}

HTML 使用：

<div class="energy">能量元素</div>

3D翻页

真实的3D翻页动画效果，增强空间感。

适用场景：

  • 电子书翻页
  • 卡片切换
  • 内容过渡

CSS 代码：

@keyframes page-flip {
  0% {
    transform: perspective(1200px) rotateY(0);
  }
  100% {
    transform: perspective(1200px) rotateY(180deg);
  }
}

HTML 使用：

<div class="page-flip">翻页内容</div>

量子跳跃

模拟量子态的跳跃变化，展现科技感。

适用场景：

  • 加载动画
  • 状态切换
  • 特效展示

CSS 代码：

@keyframes quantum-jump {
  0%, 100% {
    transform: scale(1) translateZ(0);
    opacity: 1;
  }
  25% {
    transform: scale(0.95) translateZ(-50px);
    opacity: 0.8;
  }
  75% {
    transform: scale(1.05) translateZ(50px);
    opacity: 0.9;
  }
}

HTML 使用：

<div class="quantum">量子效果</div>

电流流动

模拟电流在导体中流动的效果，增强科技感。

适用场景：

  • 进度条
  • 数据流动
  • 能量效果

CSS 代码：

@keyframes electric-flow {
  0% {
    background-position: 0% 0%;
    filter: brightness(1) contrast(1);
  }
  50% {
    background-position: 100% 0%;
    filter: brightness(1.2) contrast(1.2);
  }
  100% {
    background-position: 0% 0%;
    filter: brightness(1) contrast(1);
  }
}

HTML 使用：

<div class="electric">电流效果</div>

粒子扩散

粒子聚合与扩散的视觉效果，增添动感。

适用场景：

  • 特效动画
  • 转场效果
  • 交互反馈

CSS 代码：

@keyframes particle-burst {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
    filter: blur(0px);
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
    filter: blur(2px);
  }
  100% {
    transform: scale(0.9);
    opacity: 0.8;
    filter: blur(0px);
  }
}

HTML 使用：

<div class="particle">粒子扩散效果</div>

全息干扰

全息图像的故障干扰效果，展现未来感。

适用场景：

  • 故障艺术
  • 科幻界面
  • 特殊效果

CSS 代码：

@keyframes holographic-glitch {
  0%, 100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translate(0);
    opacity: 1;
  }
  20% {
    clip-path: polygon(0 15%, 100% 5%, 100% 85%, 0 95%);
    transform: translate(-2px);
    opacity: 0.9;
  }
  40% {
    clip-path: polygon(0 10%, 100% 20%, 100% 90%, 0 80%);
    transform: translate(2px);
    opacity: 0.8;
  }
}

.holographic {
  animation: holographic-glitch 2.5s infinite;
  position: relative;
  overflow: hidden;
  background: linear-gradient(45deg, var(--primary), var(--accent));
}

HTML 使用：

<div class="holographic">全息效果</div>

时空扭曲

模拟时空扭曲的视觉效果，展现科幻感。

适用场景：

  • 加载过渡
  • 特效展示
  • 页面切换

CSS 代码：

@keyframes spacetime-warp {
  0% {
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1);
    filter: brightness(1) contrast(1) blur(0px);
  }
  50% {
    transform: perspective(1000px) rotateX(180deg) rotateY(90deg) scale(1.5);
    filter: brightness(1.5) contrast(1.2) blur(5px);
  }
  100% {
    transform: perspective(1000px) rotateX(360deg) rotateY(0deg) scale(1);
    filter: brightness(1) contrast(1) blur(0px);
  }
}

.spacetime-warp {
  animation: spacetime-warp 4s ease-in-out infinite;
  transform-style: preserve-3d;
  background: linear-gradient(135deg, var(--primary), var(--accent));
}

HTML 使用：

<div class="spacetime-warp">时空扭曲效果</div>

分子重组

模拟分子重组的科幻效果，展现未来感。

适用场景：

  • 元素转换
  • 内容重组
  • 状态变化

CSS 代码：

@keyframes molecular {
  0%, 100% {
    clip-path: circle(50% at 50% 50%);
    filter: hue-rotate(0deg) blur(0px);
    transform: scale(1);
  }
  25% {
    clip-path: circle(25% at 75% 25%);
    filter: hue-rotate(90deg) blur(2px);
    transform: scale(0.8);
  }
  75% {
    clip-path: circle(35% at 25% 75%);
    filter: hue-rotate(270deg) blur(4px);
    transform: scale(1.2);
  }
}

.molecular {
  animation: molecular 6s ease-in-out infinite;
  background: linear-gradient(45deg, var(--primary), var(--accent));
}

HTML 使用：

<div class="molecular">分子重组效果</div>

量子纠缠

模拟量子纠缠的视觉效果，展现高科技感。

适用场景：

  • 数据连接
  • 同步效果
  • 关联展示

CSS 代码：

@keyframes quantum-entangle {
  0%, 100% {
    box-shadow: 
      0 0 30px var(--primary),
      inset 0 0 20px var(--accent);
    transform: rotate(0deg) scale(1);
    filter: brightness(1) saturate(1);
  }
  50% {
    box-shadow: 
      0 0 50px var(--accent),
      inset 0 0 40px var(--primary);
    transform: rotate(180deg) scale(0.8);
    filter: brightness(1.5) saturate(1.5);
  }
}

.quantum-entangle {
  animation: quantum-entangle 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  background: conic-gradient(from 0deg, var(--primary), var(--accent), var(--primary));
}

HTML 使用：

<div class="quantum-entangle">量子纠缠效果</div>