⼗.CSS3的过渡效果
⽬录
⼀、效果概述
CSS3的过渡效果可以让⼀个元素的某⼀个或多个css属性从⼀个值平滑过渡到另⼀个值。可以⽤⼀个transition来实现元素的过渡效果。⼆、效果应⽤
1.改变宽度
通过transition属性，可以设置元素的过渡效果，当某个属性被设置成过渡属性之后，这个属性的值如果发⽣变化，就会以动画的形式从初始状态过渡到结束状态。
代码如下（⽰例）：
.box {
width:200px;
height:200px;
margin:100px auto;
background-color: #00f;
transition: width 1s;
}
.box:hover{
width:300px;
}
在上⾯的代码中，我们通过transition属性将width设置为过渡属性，然后在伪类选择器中定义当⿏标悬浮的时候，元素的宽度变为
300px，这样当⿏标悬浮的时候，元素就会以动画的形式变成width值为300px的元素。同时，transition属性指定了过渡时间为1s，所以元素从200px过渡到300px，需要使⽤1秒的时间。
2.带参数设置
我们可以为transition设置了四个值：
1.设置过渡属性;
2.设置过渡时间;
3.设置过渡函数，这个函数可以设置过渡效果是以怎么样的⽅式运动，linear表⽰线性运动。线性运动其实只是连接 动画属性 和时间的
⼀个点。⼀条运动线展⽰了⼀个动画运动的速度是如何受时间的影响并随之变化的。margin属性怎么用
4.表⽰延时时间，在上⾯的例⼦中，⿏标悬浮后经过0.5秒后元素才开始运动。
代码如下（⽰例）：
.box {
width:200px;
height:200px;
margin:100px auto;
background-color: #00f;
transition: width 2s linear 0.5s;
}
.box:hover {
width:300px;
}
3.多属性的过渡效果
过渡效果可以设置多个过渡属性，
代码如下（⽰例）：
.box {
width:200px;
height:200px;
margin:100px auto;
background-color: #00f;
transition: width 2s linear 0.5s,height 3s linear 0.2s;
}
.box:hover {
width:300px;
height:500px;
}
在上⾯的代码中，我们给transition属性设置了两个过渡属性，这样当⿏标悬浮的时候，宽度和⾼度都能实现过渡效果。
三、形变的效果
结合我们上⼀章讲解的形变，将形变的属性设置成过渡属性。
代码如下（⽰例）：
.box {
width:200px;
height:200px;
margin:100px auto;
background-color: #00f;
transition: transform 3s;
}
.box:hover {
transform:rotate(360deg);
}
通过将transform指定为过渡属性，就可以实现形变的过渡效果，我们也可以添加多个形变函数。
代码如下（⽰例）：
.box {
width:200px;
height:200px;
margin:100px auto;
background-color: #00f;
transition: transform 3s;
}
.box:hover {
transform:rotate(360deg)scale(2);
}
可以在transform属性后⾯添加两个形变函数，使⽤空格分开，且不可写两个transform属性，两个相同的css属性，下⾯值的会覆盖上⾯的值。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。