|
任务描述
本关任务：用CSS3实现物体移动效果。
效果如下：
相关知识
为了完成本关任务，你需要掌握：1.transform属性，2.transition属性。
transform属性
下面是基本的html结构，：
<div class="move"><p>向上移动</p></div>
效果如下：
现在需要平滑的往上移动200px。
效果如下：
该如何实现呢？
咱们先实现往上移动200px，用到了 transform属性。
如上面所说，添加如下代码：
.move:hover{border: 2px solid #000;}.move:hover p{ /*注意是给 p 添加的*/transform : translate(0, -200px);}
效果如下：
基本用法：
transform: translate(x,y);
参数详解：
x 表示左右移动，正数表示向右移动，负数表示向左移动；y 表示上下移动，正数表示向下移动，负数表示向上移动；
transition属性
基本效果已经实现了，就是有点突兀，如何平滑的过渡呢？这里用到了transition属性。
添加如下代码：
.move p{transition: all 1s linear;}
效果如下：
这就已经实现了。这里解释一下上面的参数：
编程要求
在右侧编辑器中，补全Begin至End中间的部分，按照提示完成代码：
注意：
-
这里的 0px不用加px，直接写0即可； -
这里用 0.3s，不用.3s； -
这些只是为了方便评测做的规范；
效果如下：
<!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;
}
#nav {
width: 100%;
margin: 0 auto;
padding: 40px 0;
}
#nav .nav-item {
width: 21%;
height: auto;
text-align: center;
color: #ff7415;
padding-top: 10px;
float: left;
transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
}
#nav .nav-item:not(:last-child) {
margin-right: 28px;
}
#nav .nav-item:hover {
border: 1px solid #FF7415;
}
/*---------- Begin -----------*/
#nav .nav-item:hover .nav-info {
/*向上移动10px*/
transform:translate(0,-10px);
}
#nav .nav-item .nav-info {
/*给所有属性添加0.3s的 平滑过滤效果(linear),不考虑兼容性*/
transition:all 0.3s linear;
}
/*------------ End --------------*/
#nav .nav-item img {
width: 64px;
height: 64px;
margin: 20px auto;
}
#nav .nav-item .nav-title {
font-size: 22px;
margin-bottom: 12px;
}
</style>
</head>
<body>
<div id="nav">
<div class="nav-item">
<div class="nav-info">
<img src="https://www.educoder.net/attachments/download/198536" alt="cecorate" />
<p class="nav-title">儿童装饰画</p>
<p>装饰</p>
</div>
</div>
<div class="nav-item">
<div class="nav-info">
<img src="https://www.educoder.net/attachments/download/198538" alt="cecorate" />
<p class="nav-title">趣味素描</p>
<p>sketch</p>
</div>
</div>
<div class="nav-item">
<div class="nav-info">
<img src="https://www.educoder.net/attachments/download/198539" alt="cecorate" />
<p class="nav-title">漫画阅读</p>
<p>comic</p>
</div>
</div>
<div class="nav-item">
<div class="nav-info">
<img src="https://www.educoder.net/attachments/download/198537" alt="cecorate" />
<p class="nav-title">手工制作</p>
<p>manual</p>
</div>
</div>
</div>
</body>
</html>
| 
转播
