<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> .box { overflow: hidden; cursor: pointer; border: 1px solid #ccc; } .zoom { /* 缩放的元素 */ -webkit-transition: -webkit-transform .2s; transition: transform .2s; } .box:hover .zoom { /* hover放大 */ -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); zoom: 1.05; } :root .box:hover .zoom { zoom: 1; } </style> </head> <body> <div class="box"> <img src="image/53e1d4a2Nf68afe13.jpg" class="zoom"> </div> </body> </html>