CSS是現代Web設計中必不可少的元素,可以實現各種豐富的視覺效果。其中一種讓網站更加吸引人的特效就是圖片上浮的動畫效果。
img { width: 200px; height: 200px; transition: all 0.3s ease-in-out; } img:hover { transform: translateY(-10px); box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3); }
以上代碼可以在圖片上添加鼠標懸停效果,讓圖片上浮并加上陰影。其中,transition
用于控制動畫的過渡時間和緩動函數;transform
用于修改元素的位置、尺寸或旋轉等屬性;box-shadow
用于添加陰影效果。
需要注意的是,transform
和box-shadow
需要通過hover
選擇器在鼠標懸停時觸發,產生效果。
同時,其他的CSS屬性如opacity
、background-color
等也可以與transform
和box-shadow
等動畫效果結合使用,創造更加鮮活的網頁。