CSS購(gòu)物車動(dòng)畫是Web開發(fā)者經(jīng)常使用的一個(gè)技巧，它可以讓網(wǎng)站更加動(dòng)態(tài)而且吸引人。購(gòu)物車動(dòng)畫可以極大地提高用戶體驗(yàn)，為用戶提供更加方便直觀的操作，也能夠增加網(wǎng)站的互動(dòng)性和趣味性。

/*購(gòu)物車動(dòng)畫*/
.cart{
position: fixed;   /*固定定位*/
bottom: 10px;      /*底部距離*/
right: 10px;       /*右側(cè)距離*/
width: 50px;       /*購(gòu)物車圖標(biāo)寬度*/
height: 50px;      /*購(gòu)物車圖標(biāo)高度*/
display: flex;     /*彈性盒子布局*/
justify-content: center;  /*水平居中*/
align-items: center;      /*垂直居中*/
background-color: #0f9d58;  /*購(gòu)物車圖標(biāo)顏色*/
color: #fff;
border-radius: 50%;     /*圓形邊框*/
z-index: 99999;         /*層級(jí)*/
}
.cart:before{
content: "";           /*清除默認(rèn)內(nèi)容*/
width: 30px;           /*顏色圓圈的寬度*/
height: 30px;          /*顏色圓圈的高度*/
position: absolute;
border-radius: 50%;    /*圓形邊框*/
top: 0;                /*顏色圓圈距離購(gòu)物車符號(hào)上方的距離*/
left: 22px;            /*顏色圓圈距離購(gòu)物車符號(hào)左側(cè)的距離*/
transform-origin: center;   /*變換的起點(diǎn)位置*/
transition: 0.5s;      /*動(dòng)效時(shí)長(zhǎng)*/
}
.cart:hover, .cart:active{
transform: scale(1.1);    /*交互時(shí)變換的大小*/
}
.cart:hover:before, .cart:active:before{
animation-name: cart;        /*移動(dòng)動(dòng)畫的名稱*/
animation-duration: 0.5s;   /*動(dòng)畫時(shí)長(zhǎng)*/
animation-iteration-count: infinite;  /*動(dòng)畫重復(fù)次數(shù)*/
}
/*移動(dòng)動(dòng)畫*/
@keyframes cart {
0% {
transform: scale(1) translateY(-20px);   /*移動(dòng)方向*/
background-color: #f1c40f;            /*顏色*/
}
50% {
transform: scale(0.9) translateY(-5px);
background-color: #e67e22;
}
100% {
transform: scale(1) translateY(0px);
background-color: #0f9d58;
}
}

以上代碼中使用了偽元素:before創(chuàng)建了一個(gè)小圓圈，表示添加的商品的顏色。然后使用CSS3動(dòng)畫來實(shí)現(xiàn)添加商品時(shí)的購(gòu)物車動(dòng)畫，當(dāng)鼠標(biāo)懸浮或者點(diǎn)擊購(gòu)物車時(shí)，購(gòu)物車也會(huì)有動(dòng)態(tài)響應(yīng)。同時(shí)，在購(gòu)物車圖標(biāo)上的縮放效果和圓形邊框的設(shè)置也使得購(gòu)物車動(dòng)畫更為美觀。