Css的transform按钮放大图片,CSS3 transition transform属性及实例详解-鼠标放到图片上图片等比例放大...

CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡，transition呈现的是一种过渡，是一种动画转换过程，如渐显、渐弱、动画快慢等。

transiton:过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间；

transiton:transition-property  transition-duration  transition-timing-function  transition-delay

transition-property ：指定要过渡的css属性

transition-duration： 指定完成过渡花费的时间

transition-timing-function： 指定速度效果的速度曲线，取值：

linear：匀速

ease： 默认，动画以低速开始，然后加快，在结束前变慢。

ease-in：缓慢开始(加速)

ease-out：缓慢结束(减速)

ease-in-out：缓慢开始，缓慢结束(先加速后减速)

transition-delay：指定过渡效果何时开始

CSS3 transition transform实例-鼠标放到图片上图片等比例放大

Html代码：

CSS代码：

div {

width: 500px;

height: 500px;

border: #000 solid 1px;

margin: 50px auto;

overflow: hidden;

}

div img {

cursor: pointer;

transition: all 0.7s;

}

div img:hover {

transform: scale(1.5);

}

代码解释：

transition: all 0.6s;表示所有的属性变化在0.6s的时间段内完成。

transform: scale(1.4);表示在鼠标放到图片上的时候图片按比例放大1.4倍。

兼容各浏览器的实例代码，请阅读《鼠标指向图片实现放大效果-CSS3特效》一文。

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2405.html