在浏览网页时，您经常会遇到这样的效果：当鼠标滑过图像时，图像会缩放。简而言之，它是通过使用CSS3中的2D转换缩放和一些简单的属性设置来实现的。Img:hover+scale实现了鼠标到达图像时的图像缩放，transition添加了过渡效果，使图像缩放更自然。设置溢出：隐藏，放大图片，使多余部分不再显示。
注：应设置div和img的宽度和高度，img图片的宽度和高度应与div框的宽度和高度相同。如果图片的宽度和高度小于div框的宽度和高度，IMG框将作为一个整体放大，而不仅仅是图片本身；如果图片的宽度和高度设置为大于div框的宽度和高度，则图片显示将不完整。具体代码及效果如下图所示：
使用hover+scale+transition实现图像放大的代码示例
当imgwidthheight等于divwidthheight时的缩放效果
当imgwidthandheight小于divwidthandheight时的缩放效果
当imgwidthandheight大于divwidthandheight时的缩放效果
这仅用于学习笔记和分享。如果有什么需要改进或不合适的地方，请给出更多建议。
1+0.01=1.01
1-0.01=0.99
最新评论