过渡，可以使一个属性的值经过一段时间变成另一个值 经常配合：hover来使用 过渡写在自身上
语法：
transition：属性值
| 属性值 | 描述 |
|---|---|
| transition-property： | all 表示所以得属性都会被进行过渡 多个属性之间用逗号隔开 |
| transition-duration： | 过渡持续的时间单位 s秒 ms毫秒 1秒=1000毫秒 |
| transition-delay： | 过渡的延时 几秒过后开始 |
| transition-timing-function | 过渡类型如下 |
transition-timing-function 属性如下
| 属性值 | 描述 |
|---|---|
| linear | 线性过渡(匀速运动) |
| ease | 平滑过渡(慢加速，速度越快增加越慢) |
| ease-in | 由慢到快 |
| ease-out | 又快到慢 |
| ease-in-out | 又慢到快再到慢 |
| steps(数字，end) | 分步走，根据宽度自动计算，end是等一下在走 |
| steps(数字，start) | 分步走，根据宽度自动计算，start是马上走 |
| cubic-bezier(p1,p2,p3,p4) | 可以通过贝塞尔曲线来指定运动曲线 比如(.32，.1.86，.43，.-0.33) 可以进入www.cubic-bezier.com搜索网站具体查看数值 |
过渡得简写
transition：/*属性名*/ /*持续时间*/ /*过渡类型*/ /*过渡延迟*/;
代码演示
<style>
.box1 {
margin: auto;
width: 100px;
height: 100px;
background-color: red;
transition: all 2s;
}
.box1:hover {
width: 400px;
height: 400px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
没过度之前
过度之后的
思维导图
1321
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
