版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Andone_hsx/article/details/85046575
任务描述
本关任务:用CSS3放大效果。
效果如下:
为了完成本关任务,你需要掌握:1.transform
属性,2.transition
属性。
下面是基本的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
属性。
添加如下代码:
.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 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>