js加入购物车动画图片

<button id="add-to-cart">添加到购物车</button>
<div id="cart-icon">🛒</div>
<img src="product.jpg" alt="Product" id="product-image">

#cart-icon {
  position: fixed;
  top: 10px;
  right: 10px;
}

@keyframes addToCart {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.5) translateX(100px);
    opacity: 0.5;
  }
  100% {
    transform: scale(0.2) translateX(200px);
    opacity: 0;
  }
}

document.getElementById('add-to-cart').addEventListener('click', function() {
  var productImage = document.getElementById('product-image');
  var cartIcon = document.getElementById('cart-icon');

  // 创建一个克隆的图片元素用于动画
  var clone = productImage.cloneNode(true);
  clone.style.position = 'absolute';
  clone.style.top = productImage.offsetTop + 'px';
  clone.style.left = productImage.offsetLeft + 'px';
  clone.style.animation = 'addToCart 1s forwards';

  // 将克隆的图片添加到DOM中
  document.body.appendChild(clone);

  // 动画结束后移除克隆的图片
  clone.addEventListener('animationend', function() {
    this.remove();
  });

  // 更新购物车图标（可选：增加商品数量显示等）
  // ...
});