CSS中有一個很有趣的效果,就是可以通過一些簡單的代碼讓圖片在鼠標觸碰時浮起來,增加網頁的互動性。
img:hover { box-shadow: 0 0 10px rgba(0,0,0,0.6); transform: translateY(-5px); }
以上的代碼實現了當鼠標懸浮在圖片上時,給圖片添加了一個陰影效果,并通過transform屬性向上移動了5px。
當然,你也可以根據自己的需要自由發揮,比如改變陰影的方向、大小和顏色等。下面是一個例子:
img:hover { box-shadow: 5px 5px 10px rgba(0,0,0,0.6); transform: translateY(-5px) rotate(-2deg); }
以上代碼實現了當鼠標懸浮在圖片上時,給圖片添加了一個向右下角的陰影效果,并通過transform屬性向上移動了5px并旋轉了-2度。
可以說,使用CSS制作出這樣的效果非常的簡單,而且還能為網頁增加更多的互動性,讓用戶更加喜歡你的網站。