介绍
实现鼠标经过图片时,图片等比放大,但是图片的父盒子不会改变;主要使用了
css
的动画来实现。
实现效果
代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>.box{height: 400px;width: 400px;border: 10px solid red;margin: 100px auto;/* 设置overflow: hidden 当放大的时候超出部分隐藏 */overflow: hidden;}.box img{display: inline-block;height: 100%;width: 100%;cursor: pointer;transition: all .6s;}.box img:hover{transform:scale(1.2);}</style><body><divclass="box"><imgsrc="./images.jpg"alt=""></div></body></html>
本文转载自: https://blog.csdn.net/Shivy_/article/details/129306134
版权归原作者 发呆的薇薇° 所有, 如有侵权,请联系我们删除。
版权归原作者 发呆的薇薇° 所有, 如有侵权,请联系我们删除。