用CSS3实现放大效果

最新推荐文章于 2023-08-06 17:03:05 发布

Andone_hsx

最新推荐文章于 2023-08-06 17:03:05 发布

阅读量7.6k

点赞数

分类专栏：前端小实例文章标签： css3 放大效果

本文链接：https://blog.csdn.net/andone_hsx/article/details/85046575

版权

前端小实例专栏收录该内容

10 篇文章 0 订阅

订阅专栏

任务描述

本关任务：用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 轴的何处；

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

编程要求

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

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

注意：

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

效果如下：

<!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&nbsp;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&nbsp;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&nbsp;06-15</p>
					<p class="diary-describe">
						起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站
					</p>
				</div>
			</div>
		</div>

	</body>

</html>

Andone_hsx

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
用CSS3实现放大效果

任务描述本关任务：用CSS3放大效果。效果如下：相关知识为了完成本关任务，你需要掌握：1.transform属性，2.transition属性。transform属性下面是基本的html结构，：&lt;div class="scale"&gt; &lt;img src="img/diary1.jpg" alt="diary1"/&gt; &lt;/div&gt;..
复制链接

扫一扫