前端开发必备！7款令人惊叹的动画特效源码分享

2023-04-27 20:43:29

7 款惊艳的前端动画特效源码

引言：

在前端开发中，动画效果能够大幅提升用户体验并打造引人入胜的视觉效果。为了帮助大家快速上手这些特效，我们精心挑选了 7 款炫酷的前端动画特效源码。

1. 3D 玻璃天幕特效

这款特效模拟了光线穿过玻璃天幕的折射和反射效果，仿佛置身于真正的玻璃屋中。它非常适合打造梦幻般的视觉体验。

代码示例：

const glassPane = document.querySelector('.glass-pane');

const lightSource = document.querySelector('.light-source');

glassPane.addEventListener('mousemove', (e) => {
  const x = e.clientX / window.innerWidth;
  const y = e.clientY / window.innerHeight;

  lightSource.style.transform = `translateX(${x * 100}%) translateY(${y * 100}%)`;
});

2. 旋转粒子背景特效

这款特效由许多旋转的粒子组成，随着鼠标的移动，粒子会跟随移动并发生颜色变化。它非常适合打造科技感十足的网站背景。

代码示例：

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

let particles = [];

for (let i = 0; i < 100; i++) {
  particles.push({
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    radius: Math.random() * 5,
    color: `hsl(${Math.random() * 360}, 100%, 50%)`,
    vx: (Math.random() - 0.5) * 2,
    vy: (Math.random() - 0.5) * 2,
  });
}

canvas.addEventListener('mousemove', (e) => {
  for (let i = 0; i < particles.length; i++) {
    particles[i].vx += (e.clientX - particles[i].x) / 100;
    particles[i].vy += (e.clientY - particles[i].y) / 100;
  }
});

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (let i = 0; i < particles.length; i++) {
    particles[i].x += particles[i].vx;
    particles[i].y += particles[i].vy;

    if (particles[i].x < 0 || particles[i].x > canvas.width) {
      particles[i].vx *= -1;
    }

    if (particles[i].y < 0 || particles[i].y > canvas.height) {
      particles[i].vy *= -1;
    }

    ctx.fillStyle = particles[i].color;
    ctx.beginPath();
    ctx.arc(particles[i].x, particles[i].y, particles[i].radius, 0, Math.PI * 2, false);
    ctx.fill();
  }

  requestAnimationFrame(animate);
}

animate();

3. SVG 动画文字特效

这款特效允许你使用 SVG 路径来创建动画文字，并可以自定义动画效果和速度。它非常适合打造动态的标题或文本效果。

代码示例：

const textPath = document.querySelector('path');

const text = 'Hello, world!';

let letterIndex = 0;

function animateText() {
  if (letterIndex >= text.length) {
    return;
  }

  const letter = text[letterIndex];

  const letterPath = textPath.getSubpath(0, letterIndex + 1);

  textPath.setAttribute('d', letterPath);

  letterIndex++;

  requestAnimationFrame(animateText);
}

animateText();

4. 进度条动画特效

这款特效非常适合用于网站加载进度显示，它提供了多种不同样式的进度条，并支持自定义动画效果和颜色。

代码示例：

const progressBar = document.querySelector('.progress-bar');

const progressIndicator = document.querySelector('.progress-indicator');

let progress = 0;

function animateProgress() {
  progressIndicator.style.width = `${progress}%`;

  progress++;

  if (progress > 100) {
    progress = 100;
  }

  if (progress < 100) {
    requestAnimationFrame(animateProgress);
  }
}

animateProgress();

5. 粒子爆炸动画特效

这款特效使用粒子系统来模拟爆炸效果，并支持自定义粒子大小、颜色和运动轨迹。它非常适合打造爆炸、烟雾等特效。

代码示例：

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

const particles = [];

for (let i = 0; i < 100; i++) {
  particles.push({
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    radius: Math.random() * 5,
    color: `hsl(${Math.random() * 360}, 100%, 50%)`,
    vx: (Math.random() - 0.5) * 10,
    vy: (Math.random() - 0.5) * 10,
  });
}

function animateExplosion() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (let i = 0; i < particles.length; i++) {
    particles[i].x += particles[i].vx;
    particles[i].y += particles[i].vy;

    if (particles[i].x < 0 || particles[i].x > canvas.width) {
      particles[i].vx *= -1;
    }

    if (particles[i].y < 0 || particles[i].y > canvas.height) {
      particles[i].vy *= -1;
    }

    ctx.fillStyle = particles[i].color;
    ctx.beginPath();
    ctx.arc(particles[i].x, particles[i].y, particles[i].radius, 0, Math.PI * 2, false);
    ctx.fill();
  }

  requestAnimationFrame(animateExplosion);
}

animateExplosion();

6. 悬浮卡片动画特效

这款特效允许你将卡片悬浮在空中，并支持自定义卡片大小、颜色和动画效果。它非常适合打造卡片式布局的网站。

代码示例：

const cards = document.querySelectorAll('.card');

cards.forEach((card) => {
  card.addEventListener('mousemove', (e) => {
    const x = e.clientX / window.innerWidth;
    const y = e.clientY / window.innerHeight;

    card.style.transform = `translateX(${x * 20}px) translateY(${y * 20}px)`;
  });
});

7. CSS3 动画文字特效

这款特效使用 CSS3 动画技术来创建文字动画，并支持自定义动画效果和速度。它非常适合打造动态的文本效果。

代码示例：

.text-animation {
  animation-name: text-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes text-animation {
  0% {
    color: red;
  }

  25% {
    color: green;
  }

  50% {
    color: blue;
  }

  75% {
    color: yellow;
  }

  100% {
    color: orange;
  }
}