加入购物车动画特效

原创于 2025-06-26 15:09:54 发布 · 709 阅读

CC 4.0 BY-SA版权

文章标签：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>加入购物车动画特效</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
color: #333;
padding: 20px;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

h1 {
text-align: center;
margin-bottom: 40px;
color: #333;
}

.products {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
}

.product {
background: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
overflow: hidden;
width: 280px;
transition: transform 0.3s ease;
position: relative;
}

.product:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.product-image {
height: 200px;
overflow: hidden;
position: relative;
}

.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}

.product:hover .product-image img {
transform: scale(1.05);
}

.product-info {
padding: 20px;
}

.product-title {
font-size: 18px;
margin-bottom: 10px;
color: #333;
}

.product-price {
font-size: 22px;
font-weight: bold;
color: #e74c3c;
margin-bottom: 15px;
}

.add-to-cart {
display: block;
width: 100%;
padding: 12px;
background: linear-gradient(to right, #3498db, #2ecc71);
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.add-to-cart:hover {
background: linear-gradient(to right, #2980b9, #27ae60);
}

.add-to-cart:active {
transform: scale(0.98);
}

.cart-icon {
position: fixed;
top: 20px;
right: 20px;
background: #e74c3c;
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
z-index: 100;
}

.cart-count {
position: absolute;
top: -5px;
right: -5px;
background: #2ecc71;
color: white;
width: 25px;
height: 25px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
}

/* 动画元素 */
.animate-to-cart {
position: absolute;
width: 30px;
height: 30px;
background: rgba(46, 204, 113, 0.8);
border-radius: 50%;
pointer-events: none;
z-index: 99;
animation: flyToCart 1s ease-in-out forwards;
}

@keyframes flyToCart {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(0.5);
opacity: 0.8;
}
100% {
transform: scale(0.1);
opacity: 0;
top: 20px;
left: calc(100% - 70px);
}
}

/* 提示信息 */
.notification {
position: fixed;
top: 80px;
right: 20px;
background: rgba(46, 204, 113, 0.9);
color: white;
padding: 15px 25px;
border-radius: 5px;
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
transform: translateX(200%);
transition: transform 0.3s ease;
z-index: 100;
}

.notification.show {
transform: translateX(0);
}

/* 参考文章 */
.reference {
margin-top: 50px;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
text-align: center;
}

.reference a {
color: #3498db;
text-decoration: none;
word-break: break-all;
}

.reference a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>精选商品</h1>

<div class="products">

<div class="product">
<div class="product-image">
<img src="https://via.placeholder.com/300x200?text=商品1" alt="商品1">
</div>
<div class="product-info">
<h3 class="product-title">高端智能手机</h3>
<div class="product-price">¥3999</div>
<button class="add-to-cart" data-product="1">加入购物车</button>
</div>
</div>


<div class="product">
<div class="product-image">
<img src="https://via.placeholder.com/300x200?text=商品2" alt="商品2">
</div>
<div class="product-info">
<h3 class="product-title">无线蓝牙耳机</h3>
<div class="product-price">¥599</div>
<button class="add-to-cart" data-product="2">加入购物车</button>
</div>
</div>


<div class="product">
<div class="product-image">
<img src="https://via.placeholder.com/300x200?text=商品3" alt="商品3">
</div>
<div class="product-info">
<h3 class="product-title">智能手表</h3>
<div class="product-price">¥1299</div>
<button class="add-to-cart" data-product="3">加入购物车</button>
</div>
</div>


<div class="product">
<div class="product-image">
<img src="https://via.placeholder.com/300x200?text=商品4" alt="商品4">
</div>
<div class="product-info">
<h3 class="product-title">笔记本电脑</h3>
<div class="product-price">¥6999</div>
<button class="add-to-cart" data-product="4">加入购物车</button>
</div>
</div>
</div>


<div class="cart-icon">
🛒
<span class="cart-count">0</span>
</div>


<div class="notification">
商品已成功加入购物车！
</div>

</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
let cartCount = 0;

// 加入购物车按钮点击事件
$('.add-to-cart').click(function(e) {
e.preventDefault();

// 获取按钮位置
const button = $(this);
const buttonPos = button.offset();

// 创建动画元素
const animateElement = $('<div class="animate-to-cart"></div>');
$('body').append(animateElement);

// 设置动画元素初始位置
animateElement.css({
'top': buttonPos.top + button.outerHeight() / 2 - 15,
'left': buttonPos.left + button.outerWidth() / 2 - 15
});

// 开始动画
setTimeout(function() {
animateElement.remove();

// 更新购物车数量
cartCount++;
$('.cart-count').text(cartCount);

// 显示提示信息
const notification = $('.notification');
notification.addClass('show');

setTimeout(function() {
notification.removeClass('show');
}, 2000);

// 这里可以添加实际的加入购物车逻辑
const productId = button.data('product');
console.log('加入购物车的商品ID:', productId);

}, 1000);

// 按钮点击效果
button.addClass('active');
setTimeout(function() {
button.removeClass('active');
}, 200);
});

// 购物车图标点击事件
$('.cart-icon').click(function() {
alert(`当前购物车中有 ${cartCount} 件商品`);
});
});
</script>
</body>
</html>