HTML5點擊圖片自動縮放效果十分實用,可以讓網站的用戶體驗更加友好。下面是一份簡單的源代碼示例:
<html> <head> <style type="text/css"> img:hover { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); transition: all 0.2s ease-in-out; } </style> </head> <body> <img src="your-image.jpg" alt="Your Image" width="300" height="200"/> </body> </html>
使用這段代碼只需要將圖片鏈接或者本地的圖片路徑替換掉<img>標簽的src屬性,就可以輕松實現鼠標懸浮在圖片上時,自動放大的效果。
上一篇html5點擊關閉代碼