Educoder html网页综合项目实战 第3关：用CSS3实现移动效果

任务描述

本关任务：用CSS3实现物体移动效果。

效果如下：

相关知识

为了完成本关任务，你需要掌握：1.transform属性，2.transition属性。

transform属性

下面是基本的html结构，：

1. <div class="move">
2. <p>向上移动</p>
3. </div>

效果如下：

现在需要平滑的往上移动200px。 效果如下：

该如何实现呢？
咱们先实现往上移动200px，用到了 transform属性。

如上面所说，添加如下代码：

1. .move:hover{
2. border: 2px solid #000;
3. }
4. .move:hover p{ /*注意是给 p 添加的*/
5. transform : translate(0, -200px);
6. }

效果如下：

基本用法：

transform: translate(x,y);

参数详解：

• x 表示左右移动，正数表示向右移动，负数表示向左移动；

• y 表示上下移动，正数表示向下移动，负数表示向上移动。

transition属性

基本效果已经实现了，就是有点突兀，如何平滑的过渡呢？这里用到了transition属性。

添加如下代码：

1. .move p{
2. transition: all 1s linear;
3. }

效果如下：

这就已经实现了。这里解释一下上面的参数：

• all指所有属性，包括width，height；

• 1s指过渡效果花费的时间；

• linear指过渡效果的时间曲线，这里是平滑过渡。默认是 "ease"，先慢再快最后慢。