CSS3 transition transform属性及实例详解-鼠标放到图片上图片等比例放大

CSS3的transform:scale()可以实现按比例放大或者缩小功能,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代码:

<div> <img src="1.jpg" /> </div>

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

发表评论

登录后才能评论