过度
功能:实现元素不同状态之间的平滑过渡。
之前:元素->hover状态 直接切换,从开始状态到结束状态,瞬间完成,中间过程几乎无法查看。
格式:transition:过度属性 完成时间 运动曲线 延迟时间;
数值型的属性才可以设置过渡。
width,height,color,font-size
他是一个复合属性。可以拆出单独写
transition-property 过渡属性:发生变化时,想要有过渡效果的属性。all,全属性。
transition-duration 完成时间:单位是s/ms。
transition-timing-function 运动曲线:
linear 匀速
ease 减速
ease-in 加速
ease-in-out 先加速后减速
linear 匀速
ease 减速
ease-in 加速
ease-in-out 先加速后减速
transition-delay 延迟时间:单位是s 默认为0 过渡多久后生效。 从结束状态返回到开始状态时,也会生效。
.box{
width: 200px;
height: 200px;
background-color: rosybrown;
transition-property: all;
transition-duration: 2s;
transition-timing-function: ease-in;
transition-delay: 1s;
}
.box:hover{
width: 800px;
background-color: royalblue;
}
<div class="box"></div>
鼠标悬停之前
鼠标悬停一秒后,两秒变成
鼠标移走之后一秒,两秒恢复原状
2D缩放
格式:
transform:scale(水平方向的缩放倍数,垂直方向的缩放倍数)
取值:大于1表示放大,小于1缩小。
.box{
width: 100px;
height: 100px;
margin: 100px auto;
background-color: saddlebrown;
transition: all 1s;
}
.box:hover{
transform: scale(0.5);
}
<div class="box"> </div>
鼠标悬停一秒后,方块变为原来的0.5倍
2D位移
格式:
transform:translate(水平偏移量,垂直偏移量)
参数:
正值:向右和向下 负值:反方向。
百分比。盒子本身的宽高*百分比
.box{
width: 100px;
height: 100px;
margin: 100px auto;
background-color: black;
transition: all 1s;
}
.box:hover{
transform: translate(100%,100%);
}
<div class="box"></div>
鼠标悬停在方块上时,方块向右下位移自身的长度
倾斜
transform:skew(水平倾斜角度,垂直倾斜角度)
单位:deg 角度
正值:顺时针,负值:逆时针。
width: 484px;
height: 300px;
margin: 100px auto;
background-color: black;
}
.box:hover{
transform: skew(0,10deg);
}
<div class="box"></div>
鼠标悬停
旋转
旋转
设置旋转的中心点
属性值:px 英文(left center right top bottom) 百分比
百分比是按照自身宽高*百分比计算的。
只写一个值,第二值默认为center。
让盒子进行旋转
格式:
transform: rotate(角度);
单位:deg 正值为顺时针,负值为逆时针。
transform 可以书写多个2D转换,中间用空格隔开。
当rotate和translate在一起的时候,注意书写顺序。
rotate在前,先旋转自身,再按照旋转的角度,进行位移。
translate在前,先进行位移,再旋转自身。
.box{
width: 350px;
height: 350px;
margin: 100px auto;
background-image: url("./男刀.png");
transition: all 3s;
}
.box:hover{
transform: rotate(45deg);
}
<div class="box"></div>
鼠标悬停3秒,旋转45度