用CSS3实现放大效果

﹏ヽ暗。殇╰゛Y 2021-05-16 20:37 710阅读 0赞

### 用CSS3实现放大效果 ###

*  任务描述
 *  相关知识
 *   *  transform属性
     *  transition属性
     *   *  代码文件

# 任务描述 #

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

# 相关知识 #

为了完成本关任务，你需要掌握：

1.  transform属性
2.  transition属性

## transform属性 ##

下面是基本的html结构，：

现在需要基于中心放大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 轴的何处。
 *  它默认是基于中心的。用图表示如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]

### 代码文件 ###

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8" />
    		<title>少儿教育</title>
    		<style type="text/css"> * { margin: 0; padding: 0; } ul, li { list-style: none; } a { color: #888888; text-decoration: none; font-size: 16px; } body { background: #f7f7f7; position: relative; } .diary-block { width: 90%; height: 360px; margin:40px auto; padding: 0px 40px; } .diary-item { width: 26%; float: left; border: 1px solid #ccc; } .diary-item:not(:last-child) { margin-right: 7%; } .diary-item .diary-img { overflow: hidden; } /*----------- Begin ---------*/ .diary-item .diary-img img { width: 100%; height: 200px; /*给img所有属性添加0.3s的平滑过渡效果(linear)*/ transition:all 0.3s linear; } .diary-item .diary-img img:hover { /*缩放中心为center*/ transform-origin:center center; /*放大倍数为1.1倍;*/ transform:scale(1.1,1.1); } /*--------- End ----------*/ .diary-item .diary-details { height: 150px; padding: 10px 30px; color: #888; } .diary-item .diary-details p { line-height: 26px; } .diary-item .diary-details .diary-describe { height: 72px; overflow: hidden; } </style>
    	</head>
    
    	<body>
    
    		<div class="diary-block">
    			<div class="diary-item clearfix">
    				<div class="diary-img">
    					<img src="https://www.educoder.net/attachments/download/198656" alt="" />
    				</div>
    				<div class="diary-details">
    					<p>如何选择培训机构 ？</p>
    					<p>2017 06-15</p>
    					<p class="diary-describe">
    						起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站
    					</p>
    				</div>
    			</div>
    			<div class="diary-item">
    				<div class="diary-img">
    					<img src="https://www.educoder.net/attachments/download/198657" alt="" />
    				</div>
    				<div class="diary-details">
    					<p>如何选择培训机构 ？</p>
    					<p>2017 06-15</p>
    					<p class="diary-describe">
    						起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站
    					</p>
    				</div>
    			</div>
    			<div class="diary-item">
    				<div class="diary-img">
    					<img src="https://www.educoder.net/attachments/download/198658" alt="" />
    				</div>
    				<div class="diary-details">
    					<p>如何选择培训机构 ？</p>
    					<p>2017 06-15</p>
    					<p class="diary-describe">
    						起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站
    					</p>
    				</div>
    			</div>
    		</div>
    
    	</body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]: /images/20210516/fbf25c705ab845f6bbaeb3ef57d8cf1c.png