用CSS3实现放大效果

任务描述

本关任务：用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>

用CSS3实现放大效果相关推荐

css3为图片添加鼠标移入放大效果
css3为图片添加鼠标移入放大效果只需要为添加效果的图片定义一个伪类 img.zoom-img:hover {-webkit-transform: scale(1.15);-webkit-trans ...
css三角形增涨,CSS3实现三角形不断放大效果
一.CSS3三角形不断放大特效 11.1 图片预览 11.2 index.html代码 CSS3三角形不断放大特效 11.3 style.css代码 html { height: 100%; } bo ...
css3鼠标悬浮放大效果
<!doctype html> <html><head><meta charset="utf-8"><title>css ...
html鼠标移动时图片放大缩小,JS与CSS3实现图片响应鼠标移动放大效果示例
本文实例讲述了JS与CSS3实现图片响应鼠标移动放大效果.分享给大家供大家参考,具体如下: 今天看网易的网站上,当我把鼠标放上去的时候发现图片放大,移开图片缩小,于是自行尝试,结果如下. 方法一:使用 ...
用CSS3实现对图片的放大效果
用CSS3对图片放大效果 .right_div .topicons li a:hover img{ -webkit-transform:scale(1.5,1.5); -moz-tra ...
怎么在html中加入特效文字,如何使用HTML5+css3实现粒子效果文字动画特效（附完整代码）...
我们在浏览web网页的时候会发现现在的网页做的越来越美观,很多动画特效做的越来越炫酷,这离不开HTML5和css3的深入开发.今天我们要来分享一款基于HTML5和css3的文字特效--粒子效果文字动画 ...
html怎么把字做成动画效果,如何使用HTML5 css3实现粒子效果文字动画特效（附完整代码）...
摘要腾兴网为您分享:如何使用HTML5 css3实现粒子效果文字动画特效(附完整代码),学宝,小米社区,手机管家,神州专车等软件知识,以及小学英语点读机,便利宝,startos,工资宝,玩,大将军手 ...
css3实现动画效果完整代码demo
过渡渐隐适合两张图片调整其中一个透明度,完整代码: <!doctype html> <html lang="en"> <head><me ...
ae制h5文字动画_如何使用HTML5+css3实现粒子效果文字动画特效（附完整代码）
我们在浏览web网页的时候会发现现在的网页做的越来越美观,很多动画特效做的越来越炫酷,这离不开HTML5和css3的深入开发.今天我们要来分享一款基于HTML5和css3的文字特效--粒子效果文字动画 ...

用CSS3实现放大效果

用CSS3实现放大效果相关推荐

最新文章

热门文章