用CSS3实现放大效果

爱被打了一巴掌 2022-04-04 12:09 400阅读 0赞

任务描述

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

效果如下：

![198682][]

相关知识

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

transform属性

下面是基本的html结构，：

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

效果如下：  
![196979][]  
现在需要基于中心放大1.2倍。

效果如下：

![196980][]

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

如上面所说，添加如下代码：

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

效果如下：

![196981][]

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

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

这里解释一下参数：

*  `scale`表示放大或缩小；
 *  `()`里大于1 表示放大，小于1 表示缩小；
 *  第一个数表示`x`轴的缩放，第二个数表示`y`轴的缩放，如果两个数一样，可以用一个数代替。

transition属性

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

添加如下代码：

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

效果如下：

![196980][]

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

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

`transform-origin: center center;`

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

参数详解：

*  第一个参数可以为：`left`， `center`，`right`，定义视图被置于 `X`轴的何处；
 *  第二个参数可以为：`top`，`center`，`bottom`， 定义视图被置于 `Y` 轴的何处；

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

![196982][]

编程要求

在右侧编辑器中，补全`Begin`至`End`中间的部分，按照提示完成代码：

*  给`img`所有属性添加`0.3s`的平滑过渡效果`(linear)`，不考虑兼容性；
 *  设置`img`缩放中心为`center`；
 *  设置`img`放大倍数为`1.1`倍；

注意：

*  这里用 `0.3s`，不用`.3s`；
 *  缩放中心用 `center center`；
 *  放大倍数为 `1.1, 1.1`；
 *  这些只是为了方便评测做的规范；

效果如下：

![198682][]

<!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>

[198682]: /images/20220404/bec6e2308a87496db8c403dcf79a89be.png
[196979]: https://educoder.trustie.net/attachments/download/196979
[196980]: https://educoder.trustie.net/attachments/download/196980
[196981]: https://educoder.trustie.net/attachments/download/196981
[196982]: https://educoder.trustie.net/attachments/download/196982