CSS IMG 如何使用TRANSFORM实现鼠标移动上去变大移出恢复原样呢?TRANSFORM是CSS的变换属性,我们可以利用TRANSFORM实现一些基本的动画,对整个页面起到了画龙点睛的作用,今天我们要实现的是页面上的图片(IMG)在鼠标移动上去表达,移出回复原样的效果!


首先我们定义IMG的CSS样式

img {
    transition: all 0.6s;
}
    img:hover {
        transform: scale(1.4);
    }
这样,我们HTML页面中的IMG标签都会实现鼠标移动进去变大移出变小的效果了!注意,我们要设置IMG的父级元素CSS的OVERFLOW属性为HIDDEN(OVERFLOW:HIDDEN)这样会更好看点儿,是不是很简单,快去试试CSS的TRANSFORM属性吧!
本文CSS IMG 如何使用TRANSFORM实现鼠标移动上去变大移出时恢复原样CSS天才 学习の家发布的原创文章
转载请注明地址:https://www.pupilshome.com/blogs/20744.html