CSS中有許多有趣的特效，比如購物車飛的效果。

.cart{
position: relative;
}
.add-to-cart{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
.cart-fly{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 999;
animation: fly 0.5s ease-in-out;
}
@keyframes fly{
0%{
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
25%{
transform: translate(-50%, -50%) scale(1.5);
opacity: 0.75;
}
50%{
transform: translate(-50%, -50%) scale(2);
opacity: 0.5;
}
75%{
transform: translate(-50%, -50%) scale(2.5);
opacity: 0.25;
}
100%{
transform: translate(-50%, -50%) scale(3);
opacity: 0;
}
}

在HTML中，我們需要一個(gè)列表來表示商品，每個(gè)商品都需要加入購物車的按鈕，當(dāng)按鈕點(diǎn)擊時(shí)，我們需要一個(gè)物品的復(fù)制品飛到購物車上，然后消失。

商品1
描述1
加入購物車
商品2
描述2
加入購物車
商品3
描述3
加入購物車

當(dāng)按鈕被點(diǎn)擊時(shí)，我們需要用JavaScript來制作一個(gè)物品復(fù)制品，并且添加類“cart-fly”來執(zhí)行購物車飛的動(dòng)畫。

var buttons = document.querySelectorAll('.add-to-cart');
var cart = document.querySelector('.cart');
for(var i=0;i
最后在CSS中，我們需要給購物車添加一個(gè)添加過商品的樣式，讓用戶知道購物車已更新。
.cart.item-added::before{
content: '';
display: block;
position: absolute;
top: 0;
right: -10px;
width: 10px;
height: 10px;
background: red;
border-radius: 50%;
}
現(xiàn)在，我們就完成了購物車飛的效果！