要实现鼠标悬停时放大的效果,可以使用“transform”属性,结合“scale”函数来实现。
.hover-zoom { display: inline-block; transition: transform .2s; } .hover-zoom:hover { transform: scale(1.2); }
上面的代码,将一个元素的宽高比例保持不变,并且悬停时将元素放大到原来的1.2倍。
需要注意的是,被放大的元素应该是一个块级元素或行内块元素,否则可能会导致布局的异常。
可以使用上述方法来实现有趣的鼠标悬停效果,例如放大图标、图片、按钮等等。