js实现图片抖动效果
使用CSS动画实现图片抖动
通过CSS的@keyframes定义抖动动画，结合transform属性实现位移效果。将动画应用到图片元素上即可。
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.shake-image {
animation: shake 0.5s infinite;
}<img src="image.jpg" class="shake-image">使用JavaScript触发CSS动画
通过动态添加/移除CSS类控制抖动效果，适合需要交互触发的场景。
const img = document.querySelector('img');
img.addEventListener('click', () => {
img.classList.add('shake-image');
setTimeout(() => img.classList.remove('shake-image'), 500);
});纯JavaScript实现抖动
通过定时器动态修改图片位置，实现更灵活的抖动控制。
function shakeImage(element, duration = 500, distance = 5) {
const startTime = Date.now();
const originalPosition = element.style.position || 'static';
element.style.position = 'relative';
function update() {
const elapsed = Date.now() - startTime;
if (elapsed >= duration) {
element.style.left = '0';
element.style.position = originalPosition;
return;
}
const progress = elapsed / duration;
const offset = Math.sin(progress * 20) * distance * (1 - progress);
element.style.left = `${offset}px`;
requestAnimationFrame(update);
}
update();
}
// 使用示例
const img = document.querySelector('img');
img.addEventListener('click', () => shakeImage(img));使用GSAP库实现高级抖动
GreenSock Animation Platform (GSAP)提供更强大的动画控制能力。
// 引入GSAP库后
gsap.to(".shake-image", {
x: 10,
duration: 0.1,
repeat: 5,
yoyo: true,
ease: "power1.inOut"
});响应式抖动效果
根据设备特性调整抖动幅度，避免移动端显示问题。
function responsiveShake(element) {
const isMobile = window.innerWidth < 768;
const distance = isMobile ? 3 : 8;
shakeImage(element, 600, distance);
}每种方法适用于不同场景：CSS动画适合简单静态效果，JavaScript实现适合需要精确控制的场景，GSAP适合复杂动画序列。根据项目需求选择合适方案，注意性能优化和用户体验平衡。
