CSS購物車動畫是Web開發者經常使用的一個技巧，它可以讓網站更加動態而且吸引人。購物車動畫可以極大地提高用戶體驗，為用戶提供更加方便直觀的操作，也能夠增加網站的互動性和趣味性。

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

以上代碼中使用了偽元素:before創建了一個小圓圈，表示添加的商品的顏色。然后使用CSS3動畫來實現添加商品時的購物車動畫，當鼠標懸浮或者點擊購物車時，購物車也會有動態響應。同時，在購物車圖標上的縮放效果和圓形邊框的設置也使得購物車動畫更為美觀。