前端基础动画合集文档

努力找实习的前端小白
101 阅读4分钟

该文章包含多种基础到进阶的前端动画效果实现，均采用HTML、CSS和JavaScript开发，适合用于学习前端动画原理及实践参考。

1. 无限打字机效果（1.html）

  • 文件路径：基础动画合集/打字机效果/1.html
  • 效果描述：实现文字逐个输入、自动删除并循环切换文本的打字机效果，带有光标闪烁动画。
  • 核心实现：
    • CSS定义打字机样式及光标（border-right模拟）
    • JavaScript通过定时器控制文本的逐个添加/删除，循环切换预设文本数组
<!-- 核心JS逻辑 --> 
const texts = ["前端动画示例", "JavaScript 打字机", "无限循环效果"];
function typeEffect() {
  const currentText = texts[textIndex];
  if (!deleting) {
    // 打字逻辑：截取子串显示
    typingEl.textContent = currentText.substring(0, charIndex + 1);
    charIndex++;
    if (charIndex === currentText.length) {
      deleting = true; // 切换到删除状态
      setTimeout(typeEffect, 1000);
      return;
    }
  } else {
    // 删除逻辑：减少子串长度
    typingEl.textContent = currentText.substring(0, charIndex - 1);
    charIndex--;
    if (charIndex === 0) {
      deleting = false;
      textIndex = (textIndex + 1) % texts.length; // 循环切换文本
    }
  }
  setTimeout(typeEffect, deleting ? 100 : 150); // 删除速度快于打字
}
  • 使用说明：页面加载后自动启动，无需额外操作。

2. 淡入淡出 + JS 控制（2.html）

  • 文件路径：基础动画合集/淡入淡出/2.html
  • 效果描述：通过按钮控制文本的淡入淡出显示状态，过渡平滑自然。
  • 核心实现：
    • CSS使用opacity属性结合transition定义淡入淡出过渡
    • JavaScript监听按钮点击事件，切换show类控制显示状态
<!-- 核心样式 --> 
.fade {
  opacity: 0;
  transition: opacity 0.6s;
}
.fade.show {
  opacity: 1;
}

<!-- 核心JS --> 
btn.addEventListener('click', () => {
  text.classList.toggle('show');
});
  • 使用说明：点击"切换显示"按钮控制文本显示/隐藏。

3. 滑入效果 + JS 触发（3.html）

  • 文件路径：基础动画合集/滑入效果/3.html
  • 效果描述：元素从左侧外部滑入到页面中，并伴随透明度变化，点击按钮可触发切换。
  • 核心实现：
    • CSS通过transform: translateX(-200px)将元素置于左侧外部，结合opacity和transition定义过渡
    • JavaScript控制show类的添加/移除，触发滑入/滑出
<!-- 核心样式 --> 
.slide {
  transform: translateX(-200px);
  opacity: 0;
  transition: all 0.7s ease;
}
.slide.show {
  transform: translateX(0);
  opacity: 1;
}
  • 使用说明：点击"滑入"按钮触发元素滑入/滑出切换。

4. 粒子文字爆炸效果（4.html）

  • 文件路径：基础动画合集/进阶特效/4.html
  • 效果描述：基于Canvas实现文字粒子化，定时触发粒子爆炸效果后缓慢回归原位，支持窗口大小自适应。
  • 核心实现：
    • 定义Particle类管理粒子属性（位置、速度、透明度等）
    • 将文字绘制到Canvas，通过像素数据提取文字区域生成粒子
    • 实现爆炸（随机赋予粒子速度）和回归（缓动动画）逻辑
// 粒子类 
class Particle {
  constructor(x, y, color) {
    this.x = x;
    this.y = y;
    this.color = color;
    this.baseX = x; // 原始位置（用于回归）
    this.baseY = y;
    this.vx = (Math.random() - 0.5) * 20;
    this.vy = (Math.random() - 0.5) * 20;
    this.alpha = 1;
  }
  update() {
    // 缓动回归算法
    this.x += (this.baseX - this.x) * 0.05;
    this.y += (this.baseY - this.y) * 0.05;
  }
}

// 爆炸函数 
function explode() {
  for (let p of particles) {
    p.vx = (Math.random() - 0.5) * 50; // 赋予随机高速
    p.vy = (Math.random() - 0.5) * 50;
    p.x += p.vx;
    p.y += p.vy;
    p.alpha = 0.2;
  }
}
  • 使用说明：页面加载后自动运行，每3秒触发一次爆炸效果。

5. 平滑过渡 + JS 操作（5.html）

  • 文件路径：基础动画合集/平滑过渡/5.html
  • 效果描述：点击方块触发样式（背景色）和变换（旋转、缩放）的平滑过渡效果。
  • 核心实现：
    • CSS使用transition: all 1s ease定义所有属性的过渡动画
    • 通过切换active类改变元素的背景色、旋转角度和缩放比例
<!-- 核心样式 --> 
.box {
  width: 100px; height: 100px;
  background: #3498db;
  transition: all 1s ease;
}
.active {
  background: #e74c3c;
  transform: rotate(180deg) scale(1.2);
}

<!-- 核心JS --> 
box.addEventListener('click', () => {
  box.classList.toggle('active');
});
  • 使用说明：点击方块触发过渡效果切换。

6. 旋转 + 鼠标加速（6.html）

  • 文件路径：基础动画合集/无限旋转/6.html
  • 效果描述：元素持续旋转，鼠标悬停时旋转速度加快，离开时恢复原速。
  • 核心实现：
    • CSS定义spin动画实现无限旋转（rotate(360deg)）
    • 通过fast类修改animation-duration改变旋转速度
    • JavaScript监听鼠标进入/离开事件切换类名
<!-- 核心样式 --> 
.spin {
  animation: spin 4s linear infinite;
}
.spin.fast {
  animation-duration: 1s; /* 加速旋转 */
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

<!-- 核心JS --> 
spin.addEventListener('mouseenter', () => spin.classList.add('fast'));
spin.addEventListener('mouseleave', () => spin.classList.remove('fast'));
  • 使用说明：鼠标悬停在旋转元素上观察加速效果。

7. 心跳缩放（7.html）

  • 文件路径：基础动画合集/心跳缩放/7.html
  • 效果描述：元素模拟心跳效果，持续进行缩放变换（从小到大再恢复）。
  • 核心实现：
    • 纯CSS动画实现，通过@keyframes定义缩放关键帧（0%/100%为原大小，50%为放大状态）
<style>
.heart {
  animation: heartbeat 1s infinite;
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}
</style>
<div class="heart">❤️</div>
  • 使用说明：页面加载后自动播放心跳动画。

总结

本合集涵盖了多种前端动画实现方式：

  • 基础动画：依赖CSS @keyframes和transition
  • 交互控制：通过JavaScript监听事件（点击、鼠标进出）触发动画状态变化
  • 进阶效果：基于Canvas的粒子系统实现复杂动画

所有效果均可直接运行，可根据需求修改参数（如过渡时间、动画速度、触发方式等）进行定制。

avatar
文章
阅读
粉丝