1. 概念:從一個狀態(tài)以動畫方式變成另一種狀態(tài)的變化過程
可以制造第二狀態(tài)的處理方式目前只學(xué)了hover
2. hover閃現(xiàn)問題
.box{
width: 200px;
height: 200px;
background-color: orange;
}
.box:hover{
width: 400px;
height: 100px;
background-color: red;
}
<div class="box"></div>
當(dāng)鼠標(biāo)懸浮于box的下半部分的時候就會一直閃
解決方法 : 過度效果通過hover產(chǎn)生,可以制作一個hover層
.box{
width: 200px;
height: 200px;
background-color: orange;
}
.hover{
width: 200px;
height: 200px;
}
.hover:hover .box{
width: 400px;
height: 100px;
background-color: red;
}
<div class="hover">
<div class="box"></div>
</div>
3. 常用屬性
- 持續(xù)時間 :
transition-duration: .5s; - 延遲時間 :
transition-delay: 1s;(用戶體驗太差 , 基本不用) - 過度屬性 :
transition-property: width, height; - 過度曲線 :
transition-timing-function: linear; - 整體設(shè)置:
transition: all .3s .1s linear;
4. transition放在.box與:hover里面的區(qū)別
放在.box里面時去向第二狀態(tài)與返回第一狀態(tài)都有過渡效果
放在:hover里面只有去向第二狀態(tài)有過渡效果 , 返回第一狀態(tài)是直接變化的
5. 所有的屬性
① transition-property 屬性 表示可過渡的樣式屬性
transition-property: all | [css1 [...]];
② transition-duration 屬性 表示過渡持續(xù)時間
transition-duration: <time>;
③ transition-delay 屬性 表示過渡延遲時間
transition-delay: <time>;
④ transition-timing-function 屬性 表示過渡運動曲線
transition-timing-function: linear | ease | ease-in-out | easa-in | ease-out | cubic-bezier();
-- linear：勻速
-- ease：慢快慢
-- ease-in-out：慢快慢
-- easa-in：慢快
-- ease-out：快慢
-- cubic-bezier()：貝賽爾曲線函數(shù)
⑤ transition 屬性 表示前四個屬性整體賦值
transition: <transition-property> <transition-duration> <transition-delay> <transition-timing-function>;
6. 過渡案例----實現(xiàn)柱形圖效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>過度案例</title>
<style type="text/css">
.box {
width: 300px;
height: 300px;
margin: 0 auto;
border-bottom: 1px solid black;
position: relative;
}
.line {
width: 30px;
height: 30px;
background-color: orange;
position: absolute;
bottom: 5px;
/*top: 270px;*/
left: 120px;
transition: .4s;
}
.line:hover {
height: 200px;
}
.b {
width: 30px;
height: 10px;
border-radius: 50%;
background-color: #333;
position: absolute;
bottom: -5px
}
.t {
width: 30px;
height: 10px;
border-radius: 50%;
background-color: #333;
position: absolute;
top: -5px
}
</style>
</head>
<body>
<div class="box">
<div class="line">
<div class="t"></div>
<div class="b"></div>
</div>
</div>
</body>
</html>
