在網站的購物車頁面中,我們常常需要使用動態效果來讓用戶更加直觀地感受到購物車中商品的數量的變化。在CSS中,我們可以使用一些技巧來實現這種動態加減的效果。
/*設置購物車圖標*/ .cart-icon { background-image: url('cart-icon.png'); background-size: contain; background-repeat: no-repeat; width: 30px; height: 30px; } /*設置數量+和-的樣式*/ .quantity-btn { border: none; background-color: transparent; font-size: 20px; cursor: pointer; } /*設置加減按鈕的hover效果*/ .quantity-btn:hover { color: #008CBA; } /*設置數量的樣式*/ .quantity { display: inline-block; width: 40px; text-align: center; font-size: 16px; font-weight: bold; }
我們首先為購物車圖標設置了一個背景圖,并設置了它的寬高。接下來,我們定義了一個按鈕的樣式,它的背景顏色為透明,字體大小為20px,鼠標指針為手型,用來作為加減按鈕。然后,我們設置了按鈕的hover效果,當鼠標經過時,字體顏色會變藍。
在最后,我們定義了數量的樣式,它使用內聯塊元素來保證它的寬度不會影響其他元素的布局,字體大小為16px,字體加粗,同時設置了居中文本和加底線。通過這些CSS樣式的設置,我們可以實現一個簡單的購物車動態加減效果。
上一篇html加css個人頁面
下一篇css實現跨年效果