暢銷榜是一個經常出現在電商網站上的重要頁面。為了吸引用戶的眼球和提高留存率,很多網站都會使用各種各樣的CSS特效來美化暢銷榜頁面。下面我們介紹幾種比較受歡迎的CSS特效。
/* CSS列表動畫特效 */ .list-item { position: relative; overflow: hidden; width: 100%; height: 0; padding: 0; margin: 0; transition: height 0.3s ease; } .list-item.active { height: 50px; } /* 鼠標滑過按鈕特效 */ .button { display: inline-block; position: relative; overflow: hidden; transition: all .5s; } .button:hover { transform: translateY(-5px); box-shadow: 0 12px 25px rgba(0,0,0,.2); } /* 3D產品展示特效 */ .container { perspective: 800px; } .box { transform-style: preserve-3d; transform: translateZ(-200px); transition: transform 0.5s; } .box:hover { transform: translateZ(0px); }
以上三種特效分別是列表動畫特效、鼠標滑過按鈕特效和3D產品展示特效。列表動畫特效通過設置元素高度變化實現動畫效果;鼠標滑過按鈕特效則用到了CSS的transform和box-shadow屬性;3D產品展示特效則用到了CSS的perspective和transform-style屬性。這些CSS特效都可以通過CSS代碼輕松實現,為網站提供了更美觀、更具動感的暢銷榜頁面。