作為中國電商領域的領軍企業,天貓一直致力于提供更加優質的用戶體驗。而CSS特效片段的運用,為天貓產品頁面的打造帶來了更為靈活多變的設計風格。
/*商品展示列表hover放大效果*/ .item-card:hover { transform: scale(1.05); transition: all .3s ease-in-out; box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.3); z-index: 1; } /*購物車添加動畫*/ @keyframes cart { 0% { top: 0; right: 0; transform: scale(1); } 50% { transform: scale(1.5); } 100% { top: -20px; right: 20px; transform: scale(0.5); } } .cart-animation { position: fixed; top: 0; right: 0; animation: cart 1s ease-in-out; } /*支付成功反饋彈出蒙層*/ .modal-mask { position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .modal-wrapper { position: fixed; z-index: 10000; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.3); } .modal-header { font-size: 18px; font-weight: bold; margin-bottom: 10px; } .modal-content { font-size: 14px; color: #666; margin-bottom: 20px; } .modal-footer { text-align: center; }
以上是天貓常見的CSS特效片段代碼,其中包括了商品展示列表hover放大效果、購物車添加動畫以及支付成功反饋彈出蒙層等等。這些特效的運用,既能夠提升用戶體驗,也為產品設計帶來更多的體驗亮點。
上一篇天貓手機端能用css么
下一篇好看按鈕樣式css