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
轴的何处。
它默认是基于中心的。用图表示如下: