CSS3过渡是元素从一种样式逐渐改变为另外一种的效果,可以实现元素不同状态间的平滑过渡（当元素从一个状态进入到另一个状态时），经常来制作一些动画效果。也就是说过渡想要看到效果得有2个状态,1个是初始状态,1个是结束状态。初始状态就是我们书写的css样式,那么问题就来了,结束状态需要书写在哪里呢?对了,就是书写在:hover或者:checked等这些选择器配合。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47186.html
在之前我们书写一些效果的时候,比如书写一个:hover状态的效果,它是直接展示效果的,也就是说从开始状态到结束状态,是瞬间完成的,中间过程几乎不可见.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47186.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
/* 盒子的初始状态 */
.box{
width: 100px;
height: 100px;
font-size: 20px;
color: yellow;
background: green;
}
/* 盒子的鼠标经过结束状态 */
.box:hover{
width: 1200px;
}
</style>
</head>
<body>
<div class="box">千锋教育</div>
</body>
</html>CSS3的过渡属性,可以看到一个元素从开始状态到结束状态的中间过程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47186.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
/* 盒子的初始状态 */
.box{
width: 100px;
height: 100px;
font-size: 20px;
color: yellow;
background: green;
/* 添加过渡属性效果 */
transition: width 2s linear;
}
/* 盒子的鼠标经过结束状态 */
.box:hover{
width: 1200px;
}
</style>
</head>
<body>
<div class="box">千锋教育</div>
</body>
</html>具体语法书写有2种,一种是单独设置,一种是复合简写.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47186.html
单独设置写法如下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47186.html
- transition-property 规定应用过渡的 CSS 属性的名称。
- transition-duration 定义过渡效果花费的时间,默认是 0,单位是秒s 或者是毫秒 ms.
- transition-delay 规定过渡效果的延迟时间,默认是 0,单位是秒s 或者是毫秒 ms.
- transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。这个时间曲线有很多,有linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)
| 值 | 描述 |
|---|---|
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果规定慢速开始，然后变快，然后慢速的过渡效果 |
| ease-in | 规定以慢速开始的过渡效果 |
| ease-out | 规定以慢速结束的过渡效果 |
| ease-in-out | 规定以慢速开始和结束的过渡效果 |
| linear | 规定以相同速度开始至结束的过渡效果 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
| steps() | 指定了时间函数中的间隔数量（步长） |
简写设置写法如下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47186.html
transition: property duration timing-function delay;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47186.html