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设置了四个值:
示例代码如下所示
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属性,下面值的会覆盖上面的值。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。