版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Andone_hsx/article/details/85046551
任务描述
本关任务:用CSS3实现物体移动效果。
效果如下:
为了完成本关任务,你需要掌握:1.transform
属性,2.transition
属性。
下面是基本的html结构,:
<div class="move">
<p>向上移动</p>
</div>
效果如下:
现在需要平滑的往上移动200px
。
效果如下:
扫描二维码关注公众号,回复:
5880611 查看本文章
该如何实现呢?
咱们先实现往上移动200px
,用到了 transform
属性。
如上面所说,添加如下代码:
.move:hover{
border: 2px solid #000;
}
.move:hover p{ /*注意是给 p 添加的*/
transform : translate(0, -200px);
}
效果如下:
基本用法:transform: translate(x,y);
参数详解:
x
表示左右移动,正数表示向右移动,负数表示向左移动;y
表示上下移动,正数表示向下移动,负数表示向上移动;
基本效果已经实现了,就是有点突兀,如何平滑的过渡呢?这里用到了transition
属性。
添加如下代码:
.move p{
transition: all 1s linear;
}
效果如下:
这就已经实现了。这里解释一下上面的参数:
-
all
指所有属性,包括width
,height
; -
1s
指过渡效果花费的时间; -
linear
指过渡效果的时间曲线,这里是平滑过渡。默认是"ease"
,先慢再快最后慢。
在右侧编辑器中,补全Begin
至End
中间的部分,按照提示完成代码:
-
.nav-info
向上移动10px
; -
给
.nav-info
所有属性添加0.3s
的平滑过渡效果(linear)
,不考虑兼容性。
注意:
-
这里的
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>