用CSS3实现放大效果

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


任务描述

本关任务：用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 轴的何处。
  • 它默认是基于中心的。用图表示如下：

ccs 样式宽度撑满父容器 ccs代码放大_缩放

代码文件

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