JS特效动画112个灵感资源大公开，打造专属的视觉盛宴！

JS特效动画：打造生动有趣的网页体验

1. 粒子动画：梦幻与科技的交融

粒子动画以其浪漫梦幻的氛围和科技感，一直备受青睐。使用JS代码，你可以让粒子在屏幕上飞舞、旋转、碰撞，打造出如星河般绚丽的视觉体验。

代码示例：

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

// 粒子类
class Particle {
  constructor(x, y, vx, vy, radius, color) {
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.radius = radius;
    this.color = color;
  }

  // 绘制粒子
  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    ctx.fillStyle = this.color;
    ctx.fill();
  }

  // 更新粒子位置
  update() {
    this.x += this.vx;
    this.y += this.vy;
  }
}

// 创建粒子列表
const particles = [];

// 循环生成粒子
for (let i = 0; i < 100; i++) {
  const x = Math.random() * canvas.width;
  const y = Math.random() * canvas.height;
  const vx = (Math.random() - 0.5) * 2;
  const vy = (Math.random() - 0.5) * 2;
  const radius = Math.random() * 3;
  const color = `hsl(${Math.random() * 360}, 100%, 50%)`;

  particles.push(new Particle(x, y, vx, vy, radius, color));
}

// 循环更新和绘制粒子
function animate() {
  requestAnimationFrame(animate);

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  particles.forEach((particle) => {
    particle.update();
    particle.draw();
  });
}

animate();

2. 动感文字效果：赋予文字生命

文字在网页设计中至关重要，而动感文字效果可以为文字注入活力和趣味性。使用JS代码，你可以让文字在页面上移动、旋转、放大或缩小，甚至与用户互动，从而吸引注意力并留下深刻印象。

代码示例：

// 选择要添加动画效果的文本元素
const textElement = document.getElementById('text');

// 创建一个新的TweenMax对象
const tween = TweenMax.to(textElement, 1, {
  x: 200, // 将元素移动到x轴的200像素处
  y: 100, // 将元素移动到y轴的100像素处
  scale: 1.5, // 将元素放大到1.5倍
  rotation: 360, // 将元素旋转360度
  ease: Power1.easeInOut // 使用Power1缓动函数
});

// 鼠标悬停时启动动画
textElement.addEventListener('mouseenter', () => {
  tween.play();
});

// 鼠标移开时停止动画
textElement.addEventListener('mouseleave', () => {
  tween.reverse();
});

3. 交互式菜单动画：为导航增添灵动

菜单是网站不可或缺的元素，而交互式菜单动画可以让菜单更具灵动性和趣味性。使用JS代码，你可以实现菜单项的淡入淡出、旋转或滑动等效果，当用户鼠标悬停或点击时，菜单项会做出相应的反馈，从而提升用户操作体验。

代码示例：

// 选择菜单元素
const menu = document.getElementById('menu');

// 获取菜单项
const menuItems = menu.querySelectorAll('li');

// 循环遍历菜单项，添加动画效果
menuItems.forEach((item) => {
  // 鼠标悬停时淡入菜单项
  item.addEventListener('mouseenter', () => {
    TweenMax.to(item, 0.5, {
      opacity: 1
    });
  });

  // 鼠标移开时淡出菜单项
  item.addEventListener('mouseleave', () => {
    TweenMax.to(item, 0.5, {
      opacity: 0
    });
  });

  // 点击菜单项时，导航到相应页面
  item.addEventListener('click', () => {
    // 这里添加导航到相应页面的逻辑
  });
});

4. 创意滑块动画：让页面滑行更有趣

滑块是常见网页元素，但通过JS代码，你可以让滑块变得更加生动有趣。你可以实现滑块在页面上平滑滑动、旋转或放大缩小等效果，还可以添加一些交互元素，让用户可以控制滑块的移动，从而增加用户互动性。

代码示例：

// 选择滑块元素
const slider = document.getElementById('slider');

// 获取滑块手柄
const handle = slider.querySelector('.handle');

// 鼠标按下时开始拖动滑块
handle.addEventListener('mousedown', (e) => {
  // 记录鼠标按下的位置
  const startX = e.clientX;

  // 鼠标移动时更新滑块位置
  document.addEventListener('mousemove', (e) => {
    // 计算鼠标移动的距离
    const deltaX = e.clientX - startX;

    // 将滑块移动到新位置
    slider.style.left = `${deltaX}px`;
  });

  // 鼠标松开时停止拖动
  document.addEventListener('mouseup', () => {
    document.removeEventListener('mousemove');
  });
});

5. 吸睛进度条动画：让等待不再枯燥

进度条是网站中常用的元素，但普通的进度条往往显得枯燥乏味。使用JS代码，你可以为进度条添加一些动画效果，例如让进度条以不同的速度移动、改变颜色或形状等，从而吸引用户注意力并传达信息。

代码示例：

// 选择进度条元素
const progressBar = document.getElementById('progress-bar');

// 设置进度条的初始值
let progress = 0;

// 创建一个定时器，每100毫秒更新进度条
const timer = setInterval(() => {
  // 递增进度
  progress += 1;

  // 更新进度条的宽度
  progressBar.style.width = `${progress}%`;

  // 当进度达到100%时，停止定时器
  if (progress >= 100) {
    clearInterval(timer);
  }
}, 100);

6. 酷炫按钮动画：让交互更具活力

按钮是网站中必不可少的元素，而酷炫的按钮动画则可以为网站增添一丝活力和趣味性。使用JS代码，你可以实现按钮的淡入淡出、旋转或放大缩小等效果，还可以添加一些交互元素，让按钮在用户鼠标悬停或点击时做出相应的反馈，从而提升用户操作体验。

代码示例：

// 选择按钮元素
const button = document.getElementById('button');

// 鼠标悬停时放大按钮
button.addEventListener('mouseenter', () => {
  TweenMax.to(button, 0.5, {
    scale: 1.2
  });
});

// 鼠标移开时缩小按钮
button.addEventListener('mouseleave', () => {
  TweenMax.to(button, 0.5, {
    scale: 1
  });
});

// 点击按钮时执行操作
button.addEventListener('click', () => {
  // 这里添加点击按钮时要执行的操作
});

7. 趣味弹出窗口动画：让提示不再突兀

弹出窗口是网站中常用的元素，但传统的弹出窗口往往显得突兀和烦人。使用JS代码，你可以为弹出窗口添加一些动画效果，例如让弹出窗口从屏幕顶部或底部滑动出来，或者淡入淡出等，从而让弹出窗口更具视觉吸引力和趣味性。

代码示例：

// 选择弹出窗口元素
const modal = document.getElementById('modal');

// 显示弹出窗口
function showModal() {
  TweenMax.fromTo(modal, 0.5, {
    opacity: 0,
    y: '-100%'
  }, {
    opacity: 1,
    y: '0%'
  });
}

// 隐藏弹出窗口
function hideModal() {
  TweenMax.fromTo(modal, 0.5, {
    opacity: 1,
    y: '0%'
  }, {
    opacity: 0,
    y: '-