Educoder html网页综合项目实战 第4关:用CSS3实现放大效果
任务描述
本关任务:用CSS3放大效果。
效果如下:
相关知识
为了完成本关任务,你需要掌握:1.transform属性,2.transition属性。
transform属性
下面是基本的html结构,:
<div class="scale"><img src="img/diary1.jpg" alt="diary1"/></div>
效果如下:
现在需要基于中心放大1.2倍。
效果如下:
该如何实现呢?
咱们先实现放大1.2倍,用到了 transform 属性。
如上面所说,添加如下代码:
.scale:hover img{ /*注意给 img 添加属性*/transform: scale(1.2,1.2);transform-origin: center center;}
效果如下:
可以看出,上面的图片超出了边框,而且放大有点突兀。先解决超出边框的问题,添加如下代码:
.scale{overflow: hidden; /*内容溢出时隐藏*/}
这里解释一下参数:
-
scale表示放大或缩小; -
()里大于1 表示放大,小于1 表示缩小; -
第一个数表示
x轴的缩放,第二个数表示y轴的缩放,如果两个数一样,可以用一个数代替。
transition属性
基本效果已经实现了,就是有点突兀,如何平滑的过渡呢?这里用到了transition属性。
添加如下代码:
.scale img{transition: all 0.3s linear;}
效果如下:
这就已经实现了,参数和上一关一样。
这里再介绍一下可以转变元素位置的属性:
transform-origin: center center;
这里表示基于中心进行缩放或移动。
参数详解:
-
第一个参数可以为:
left,center,right,定义视图被置于X轴的何处; -
第二个参数可以为:
top,center,bottom, 定义视图被置于Y轴的何处。
它默认是基于中心的。用图表示如下:

浙公网安备 33010602011771号