写一个加入购物车时的飞行动画特效
要实现一个商品加入购物车时的飞行动画特效，我们可以使用HTML、CSS和JavaScript。以下是一个简单的示例，展示了如何将一个商品从列表飞到购物车中。
HTML 结构
首先，我们需要设置基本的HTML结构，包括商品列表和购物车图标。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车飞行动画</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="product-list">
<div class="product" id="product1">商品1</div>
<button onclick="addToCart('product1')">加入购物车</button>
</div>
<div id="cart" class="cart">
购物车
<div id="cartItems"></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS 样式
接下来，我们为HTML元素添加样式，并定义一个飞行动画的keyframes。
/* styles.css */
.product {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
padding: 10px;
position: relative;
cursor: pointer;
}
.cart {
width: 150px;
height: 150px;
background-color: lightgreen;
margin: 10px;
padding: 10px;
position: fixed;
right: 0;
top: 50px;
}
@keyframes flyToCart {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(100vw - 180px)); /* 假设购物车宽度为150px，外加10px的内边距和20px的外边距 */
}
}
JavaScript 逻辑
最后，我们使用JavaScript来处理点击事件，并添加飞行动画。
// script.js
function addToCart(productId) {
const product = document.getElementById(productId);
const cart = document.getElementById('cart');
const cartItems = document.getElementById('cartItems');
// 克隆商品元素以便在飞行结束后可以将其添加到购物车中显示
const productClone = product.cloneNode(true);
productClone.style.position = 'absolute';
productClone.style.top = '0';
productClone.style.animation = 'flyToCart 1s ease-out forwards';
// 计算飞行起始点和终点
const productRect = product.getBoundingClientRect();
const cartRect = cart.getBoundingClientRect();
const offsetX = productRect.left - cartRect.left;
const offsetY = productRect.top - cartRect.top;
// 设置克隆元素的初始位置，以使其与原始商品位置重合
productClone.style.left = `${offsetX}px`;
productClone.style.top = `${offsetY}px`;
// 在飞行动画结束后，将克隆元素添加到购物车中
productClone.addEventListener('animationend', () => {
cartItems.appendChild(productClone);
productClone.style.position = 'static';
productClone.style.animation = '';
});
// 将克隆元素添加到body中开始动画
document.body.appendChild(productClone);
}
这个示例展示了如何使用HTML、CSS和JavaScript创建一个简单的飞行动画，当用户点击“加入购物车”按钮时，相应的商品会“飞”到购物车中。你可以根据需要调整样式和动画细节。
