Educoder html网页综合项目实战 第4关:用CSS3实现放大效果

任务描述

本关任务:用CSS3放大效果。

效果如下:

相关知识

为了完成本关任务,你需要掌握:1.transform属性,2.transition属性。

transform属性

下面是基本的html结构,:

  1. <div class="scale">
  2. <img src="img/diary1.jpg" alt="diary1"/>
  3. </div>

效果如下:

现在需要基于中心放大1.2倍。

效果如下:

该如何实现呢?
咱们先实现放大1.2倍,用到了 transform 属性。

如上面所说,添加如下代码:

  1. .scale:hover img{ /*注意给 img 添加属性*/
  2. transform: scale(1.2,1.2);
  3. transform-origin: center center;
  4. }

效果如下:

可以看出,上面的图片超出了边框,而且放大有点突兀。先解决超出边框的问题,添加如下代码:

  1. .scale{
  2. overflow: hidden; /*内容溢出时隐藏*/
  3. }

这里解释一下参数:

  • scale表示放大或缩小;

  • ()里大于1 表示放大,小于1 表示缩小;

  • 第一个数表示x轴的缩放,第二个数表示y轴的缩放,如果两个数一样,可以用一个数代替。

transition属性

基本效果已经实现了,就是有点突兀,如何平滑的过渡呢?这里用到了transition属性。

添加如下代码:

  1. .scale img{
  2. transition: all 0.3s linear;
  3. }

效果如下:

这就已经实现了,参数和上一关一样。

这里再介绍一下可以转变元素位置的属性:

transform-origin: center center;

这里表示基于中心进行缩放或移动。

参数详解:

  • 第一个参数可以为:leftcenterright,定义视图被置于 X 轴的何处;

  • 第二个参数可以为:topcenter bottom, 定义视图被置于 Y 轴的何处。

它默认是基于中心的。用图表示如下:

posted @ 2022-05-30 00:04  Q且听风吟  阅读(259)  评论(0)    收藏  举报