「融职培训」Web前端学习 第2章 网页重构13 css3过渡效果

一、过渡效果概述

CSS3的过渡效果可以让一个元素的某一个或多个css属性从一个值平滑过渡到另一个值。可以用一个transition来实现元素的过渡效果。

二、过渡效果应用

改变宽度的过渡效果

通过transition属性，可以设置元素的过渡效果，当某个属性被设置成过渡属性之后，这个属性的值如果发生变化，就会以动画的形式从初始状态过渡到结束状态，代码如下所示。

 1 .box {
 2     width: 200px;
 3     height: 200px;
 4     margin: 100px auto;
 5     background-color: #00f;
 6     transition: width 1s;
 7 }
 8 .box:hover{
 9     width:300px;
10 }

在上面的代码中，我们通过transition属性将width设置为过渡属性，然后在伪类选择器中定义当鼠标悬浮的时候，元素的宽度变为300px，这样当鼠标悬浮的时候，元素就会以动画的形式变成width值为300px的元素。同时，transition属性指定了过渡时间为1s，所以元素从200px过渡到300px，需要使用1秒的时间。

过渡效果的带参数设置

我们可以为transition设置了四个值：

• 第一个值是设置过渡属性;
• 第二个值是设置过渡时间;
• 第三个值是设置过渡函数，这个函数可以设置过渡效果是以怎么样的方式运动，linear表示线性运动。线性运动其实只是连接 动画属性 和时间的一个点。一条运动线展示了一个动画运动的速度是如何受时间的影响并随之变化的。
• 第四个值表示延时时间，在上面的例子中，鼠标悬浮后经过0.5秒后元素才开始运动。

示例代码如下所示

 1 .box {
 2     width: 200px;
 3     height: 200px;
 4     margin: 100px auto;
 5     background-color: #00f;
 6     transition: width 2s linear 0.5s;
 7 }
 8 .box:hover {
 9     width: 300px;
10 }

设置多个属性的过渡效果

过渡效果可以设置多个过渡属性，示例代码如下所示。

 1 .box {
 2     width: 200px;
 3     height: 200px;
 4     margin: 100px auto;
 5     background-color: #00f;
 6     transition: width 2s linear 0.5s,height 3s linear 0.2s;
 7 }
 8 
 9 .box:hover {
10     width: 300px;
11     height:500px;
12 }

在上面的代码中，我们给transition属性设置了两个过渡属性，这样当鼠标悬浮的时候，宽度和高度都能实现过渡效果。

三、形变的过渡效果

结合我们上一章讲解的形变，将形变的属性设置成过渡属性，代码如下所示。

 1 .box {
 2     width: 200px;
 3     height: 200px;
 4     margin: 100px auto;
 5     background-color: #00f;
 6     transition: transform 3s;
 7 }
 8 
 9 .box:hover {
10     transform: rotate(360deg);
11 }

通过将transform指定为过渡属性，就可以实现形变的过渡效果，我们也可以添加多个形变函数，代码如下所示。

 1 .box {
 2     width: 200px;
 3     height: 200px;
 4     margin: 100px auto;
 5     background-color: #00f;
 6     transition: transform 3s;
 7 }
 8 
 9 .box:hover {
10     transform: rotate(360deg) scale(2); 
11 }

可以在transform属性后面添加两个形变函数，使用空格分开，且不可写两个transform属性，两个相同的css属性，下面值的会覆盖上面的值。

四、课后练习

1. 制作一个下拉菜单效果。
2. 制作一个滚动菜单效果。
3. 制作百度新闻首页，返回顶部的菜单效果。

【融职教育】在工作中学习，在学习中工作