關(guān)鍵字
① transition-property 屬性 表示可過(guò)渡的樣式屬性
transition-property: all | [css1 [...]];
② transition-duration 屬性 表示過(guò)渡持續(xù)時(shí)間
transition-duration: <time>;
③ transition-delay 屬性 表示過(guò)渡延遲時(shí)間
transition-delay: <time>;
④ transition-timing-function 屬性 表示過(guò)渡運(yùn)動(dòng)曲線
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 屬性 表示前四個(gè)屬性整體賦值
transition: <transition-property> <transition-duration> <transition-delay> <transition-timing-function>;
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>過(guò)度</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: orange;
/*過(guò)度*/
/*持續(xù)時(shí)間*/
/*來(lái)去均具有過(guò)度效果*/
transition-duration: .5s;
/*延遲時(shí)間*/
/*transition-delay: 1s;*/
/*過(guò)度屬性: all*/
/*transition-property: width, height;*/
/*過(guò)度曲線*/
/*transition-timing-function: linear;*/
/*整體設(shè)置*/
/*transition: all .3s .1s linear;*/
transition: .3s cubic-bezier(0,.99,0,.99);
}
.hover {
width: 200px;
height: 200px;
margin: 0 auto;
}
/*可以制造第二狀態(tài)的處理方式*/
.hover:hover .box {
width: 400px;
height: 190px;
background-color: red;
/*去向第二狀態(tài)才有過(guò)度效果*/
/*transition-duration: .1s;*/
}
.box:active {
}
</style>
</head>
<body>
<!-- 過(guò)度:從一個(gè)狀態(tài)以動(dòng)畫方式變成另一種狀態(tài)的這種變化過(guò)程就叫做過(guò)度 -->
<!-- 過(guò)度效果通過(guò)hover產(chǎn)生,可以制作一個(gè)hover層 -->
<!-- hover層處理方式:與顯示層同等區(qū)域大小 -->
<!-- 同樣可以將顯示層的位置交于hover層處理 -->
<div class="hover">
<div class="box"></div>
</div>
</body>
</html>