HTML 圖片簡單特效代碼
HTML 圖片特效可以提高網頁的視覺效果,增強用戶體驗。下面我們來學習三種常見的 HTML 圖片簡單特效代碼。
1. 鼠標懸停放大
當鼠標懸停在圖片上時,讓圖片放大,增強視覺效果。
代碼如下:
<style> img:hover { transform: scale(1.2); } </style> <img src="image.jpg" alt="image">2. 鼠標懸停漸隱 當鼠標懸停在圖片上時,讓圖片漸隱,增加交互性。 代碼如下:
<style> img:hover { opacity: 0.5; } </style> <img src="image.jpg" alt="image">3. 鼠標懸停旋轉 當鼠標懸停在圖片上時,讓圖片旋轉,增強動態效果。 代碼如下:
<style> img:hover { transform: rotate(45deg); } </style> <img src="image.jpg" alt="image">總結 以上是三種常見的 HTML 圖片簡單特效代碼,可以根據需要進行調整,增強網頁的視覺效果。在實際應用中,需要注意兼容性和頁面的加載速度。
上一篇html 圖片沉底代碼