云南网站建设、昆明网站建设

您现在的位置:首页/知识中心

CSS3实现鼠标移动到图片上图片变大,有过渡效果

文章作者:道成科技发布时:2016-04-01点击:501次

CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。

效果演示

其中-moz-transform: scaleY(1); 数字1是放大的倍数, -webkit-transition: all 0.4s ease-in-out;0.4s是完成的时间

CSS代码如下:
.img-k-left a img{width:400;height:300px; -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -o-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
.img-k-left:hover a img { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=.7); opacity: .7; }
0