前端学习笔记79-过渡
终于学完了小米商城练习,进度有点慢。
先看代码
<!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;
}
.box1{
width:800px;
height: 800px;
background-color: silver;
overflow: hidden;
}
.box1 div{
width: 100px;
height: 100px;
margin-top: 100px;
}
.box2{
background-color: #bfa;
}
.box1:hover .box2{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
这个代码的效果就是当我鼠标移入时,box2会从100100变成200200。
这种变化是瞬时的,如果我想让它有过渡效果,需要怎么处理?
用transition。
transition
作用:指定某属性发生变化时的切换方式。
.box2{
background-color: #bfa;
transition: all 2s;
}
将box2改成这个后,当box2的宽高发生变化时,需要2s进行过渡。
注意:过渡必须是从一个有效值向另一个有效值进行过渡,比如有一个值是auto,则是不能实现过渡的。
transition-property
指定要执行过渡的属性,属性间用逗号隔开,如果指定所有属性,写all。
(仅仅设置这个没有用,还得设置时间才有用)
transition-duration
指定过渡效果的持续时间。
可以写成s或ms
.box2{
background-color: #bfa;
transition-property: all;
/* transition-duration: 1000ms; */
transition-duration: 1s;
}
transition-timing-function
过渡的时序函数
如果我们设置这个属性,可以改变它的变化方式,即加速变化还是减速变化。
ease:默认值,先加速后减速。
linear:匀速。
ease-in:加速运动。
ease-out:减速运动。
ease-in-out:先加速后减速。
这几个都可以用cubic-bezier()来指定。
这个怎么用呢?
可以查网站
这里我选中linear。
然后看地址。
这里写着0,0,1,1。
所以cubic-bezier()写0,0,1,1就可以实现和linear一样的效果了。
如果想自己设置,可以调节这两个。
然后就可以得到相应的四个值。
steps():分布执行过渡效果。简单理解就是写多少,它就跳几次。写1的话,就直接跳到终态。
steps(2,end),这个的意思是,执行两步,如果我设置了10s的过渡时间,则在第5s跳一下,在第10s再跳一下到达终态。
steps(2,start),这个的意思是,执行两步,如果我还是设置了10s的过渡时间,则在第0s调一下,在第5s再跳一下到达终态。
transition-delay
过渡效果的延迟。设置多少就等多少,然后再开始变化。
transition
一般用这个简写属性。
如果同时设置delay和过渡时间,则过渡时间在前。