当前位置：首页 > JavaScript

js实现伸缩

2026-04-06 10:29:02JavaScript

使用 CSS Transitions 实现伸缩效果

通过 CSS 的 transition 属性配合 transform: scale() 可以实现平滑的伸缩动画效果。这种方法性能较好，适合简单的交互需求。

<style>
  .box {
    width: 100px;
    height: 100px;
    background: blue;
    transition: transform 0.3s ease;
  }
  .box:hover {
    transform: scale(1.2);
  }
</style>

<div class="box"></div>

使用 JavaScript 动态控制伸缩

通过 JavaScript 动态修改元素的 transform 属性可以实现更灵活的控制，比如根据用户交互或特定条件触发伸缩。

const element = document.querySelector('.box');
element.addEventListener('click', () => {
  element.style.transform = 'scale(1.5)';
});

使用 CSS Animations 实现循环伸缩

通过 @keyframes 可以创建连续的伸缩动画效果，适合需要循环展示的场景。

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

.pulse {
  animation: pulse 2s infinite;
}

结合 requestAnimationFrame 实现高性能动画

对于复杂的伸缩动画，使用 requestAnimationFrame 可以获得更好的性能，特别是在需要与其他动画同步时。

let scale = 1;
const element = document.querySelector('.box');

function animate() {
  scale = scale === 1 ? 1.2 : 1;
  element.style.transform = `scale(${scale})`;
  requestAnimationFrame(animate);
}

animate();

使用 GSAP 库实现高级伸缩效果

GSAP（GreenSock Animation Platform）提供了强大的动画控制能力，适合实现复杂的伸缩效果，如弹性动画、缓动效果等。

gsap.to(".box", {
  scale: 1.5,
  duration: 1,
  ease: "elastic.out(1, 0.3)",
  yoyo: true,
  repeat: -1
});

响应式伸缩设计

结合 CSS 变量和 JavaScript 可以实现响应式的伸缩效果，根据屏幕大小或用户输入动态调整伸缩比例。

js实现伸缩

.box {
  --scale-factor: 1;
  transform: scale(var(--scale-factor));
}

window.addEventListener('resize', () => {
  const scale = window.innerWidth > 768 ? 1.2 : 1;
  document.querySelector('.box').style.setProperty('--scale-factor', scale);
});