CSS IMG 如何使用TRANSFORM实现鼠标移动上去变大移出时恢复原样
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天才在酷学软件发布的原创文章
转载请注明地址:http://www.pupilshome.com/zhanqun/20744.html
发表评论