js 动画

作者：颠峰神射发布日期:2025-09-13 浏览:58

// 使用 JavaScript 创建一个简单的动画效果

// 获取 HTML 元素
const element = document.getElementById('myElement');

// 设置初始位置
let position = 0;

// 创建一个函数来执行动画
function move() {
  // 更新元素的位置
  position += 1;
  element.style.transform = `translateX(${position}px)`;

  // 如果位置小于 200，继续调用 move 函数
  if (position < 200) {
    requestAnimationFrame(move); // 使用 requestAnimationFrame 实现平滑动画
  }
}

// 开始动画
move();

// 解释：
// 1. `getElementById` 用于获取页面中的元素。
// 2. `transform: translateX()` 用于水平移动元素。
// 3. `requestAnimationFrame` 是一种高效的方式来创建动画，它会根据浏览器的刷新率自动调整动画帧率。
// 4. 当 `position` 达到 200px 时，动画停止。

上一篇：js 缓存

下一篇：js 日期插件