点击加入购物车，出现动态效果

好的，我可以为您提供一个带有动态效果的 HTML 购物车案例。以下是示例代码：

HTML 代码：

<div class="container">
  <div class="product">
    <h2>商品1</h2>
    <p>价格：$10</p>
    <button class="add-to-cart">加入购物车</button>
  </div>
  <div class="product">
    <h2>商品2</h2>
    <p>价格：$20</p>
    <button class="add-to-cart">加入购物车</button>
  </div>
  <div class="product">
    <h2>商品3</h2>
    <p>价格：$30</p>
    <button class="add-to-cart">加入购物车</button>
  </div>
  <div class="cart">
    <h2>购物车</h2>
    <ul></ul>
    <p class="total">总价：$0</p>
  </div>
  <div class="cart-animation"></div>
</div>

CSS 代码：

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 50px 0;
}

.product {
  text-align: center;
  margin: 0 20px;
}

.add-to-cart {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.cart {
  text-align: center;
}

.cart ul {
  list-style-type: none;
  padding: 0;
}

.cart li {
  margin: 10px 0;
}

.total {
  font-weight: bold;
}

.cart-animation {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background-color: #4CAF50;
  border-radius: 50%;
  z-index: 999;
  opacity: 0;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

JavaScript 代码：

const products = document.querySelectorAll('.product');
const cart = document.querySelector('.cart ul');
const total = document.querySelector('.total');
const cartAnimation = document.querySelector('.cart-animation');

let totalPrice = 0;

products.forEach(product => {
  const button = product.querySelector('.add-to-cart');
  const productImage = product.querySelector('img');
  button.addEventListener('click', () => {
    const name = product.querySelector('h2').textContent;
    const price = parseFloat(product.querySelector('p').textContent.slice(3));
    const item = document.createElement('li');
    item.textContent = `${name} - $${price}`;
    cart.appendChild(item);
    totalPrice += price;
    total.textContent = `总价：$${totalPrice}`;
    cartAnimation.style.opacity = '1';
    const productImageRect = productImage.getBoundingClientRect();
    const cartAnimationRect = cartAnimation.getBoundingClientRect();
    const translateX = productImageRect.left - cartAnimationRect.left;
    const translateY = productImageRect.top - cartAnimationRect.top;
    cartAnimation.style.transform = `translate(${translateX}px, ${translateY}px)`;
    setTimeout(() => {
      cartAnimation.style.opacity = '0';
      cartAnimation.style.transform = '';
    }, 500);
  });
});

在这个案例中，我们添加了一个名为 `cart-animation` 的 `<div>` 元素，它会在用户点击“加入购物车”按钮时出现，并且会以动态方式移动到购物车图标的位置。我们使用了一些 CSS 样式来使其看起来更好，并使用了 `getBoundingClientRect()` 方法来获取元素的位置。我们还使用了 `setTimeout()` 方法来在动画完成后将元素恢复到初始状态。

希望这个案例对您有所帮助！