文章出處
文章列表
當前很多購物網站，像京東，蘑菇街這些都有對展示的圖片做這種鼠標懸停圖片上移，下移，左移或者右移效果，
實現代碼很簡單，就用css3的transform便可實現。
下列代碼實現的是鼠標懸停，div向上移動30px，鼠標拿開div恢復原始位置。
css：
<style> div{ margin-top: 100px; width: 100px; height: 100px; background: pink; transition:All 0.4s ease-in-out;//讓移動效果變得平滑自然 } div:hover{ transform:translate(0,-30px); } </style>
html:
<div></div>
就是這么簡單，哈哈哈、、、、
文章列表
全站熱搜
留言列表
