CSS3(2)--- 過渡(transition)
一、概念
1、什么是過渡
通俗理解 是從一個狀態 漸漸的過渡到 另外一個狀態。
比如一個盒子原先寬度為100px,當鼠標點擊時盒子的寬度變成200px,如果直接從100px變化到200px。從視覺上看去並不友好。我們更喜歡看到的是平滑的過渡。
2、浮動的語法
屬性語法格式
transition: 要過渡的屬性 花費時間 運動曲線 何時開始;
// 如果有多組屬性變化，還是用逗號隔開。前兩個屬性必須寫。后兩個可以不寫。運動曲線默認勻速。開始時間默認0秒。
屬性值
注意
- 如果想要所有的屬性都變化過渡， 寫一個all 就可以
- transition-duration 花費時間 單位是 秒 s （這個秒是一定需要的）
- 運動曲線 默認是 ease
- 默認是 0s 立馬開始
- 過渡寫到本身上 誰做過渡動畫，寫到誰身上(下面例子說明)
運動曲線示意圖
二、示例
1、示例一
效果
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3過渡</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
/*transition: width 0.5s ease 0s, height 0.3s; 多組屬性用逗號分隔*/
transition: all 1s; /* 這里過渡是當前div，按照誰做過渡動畫，寫到誰身上，所以這里要寫在這里*/
}
div:hover {
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2、示例二
效果
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS過渡</title>
<style>
div {
width: 183px;
height: 130px;
border: 1px solid red;
overflow: hidden; /*多余部分隱藏*/
}
div img {
width: 193px;
height: 130px;
transition: all 0.4s; /*所以變化，過渡時間0.4秒*/
}
div:hover img {
margin-left: -10px; /*移動*/
}
</style>
</head>
<body>
<div>
<img src="1.jpg" alt="">
</div>
</body>
</html>
3、示例三
效果
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css過渡</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.subnav {
margin: 100px auto;
width: 20px;
}
.subnav li {
width: 20px;
height: 20px;
margin: 3px 0;
background-color: pink;
position: relative;
}
.subnav div {
position: absolute; /*子絕父相*/
right: 0;
top: 0;
height: 20px;
width: 0;
background-color: purple;
transition: all 0.6s;
z-index: -1; /*這里設置定位級別小於父類,所以父類浮在它上面*/
}
.subnav li:hover div {
width: 100px;
}
</style>
</head>
<body>
<div class="subnav">
<ul>
<li>
<div></div>
</li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
</ul>
</div>
</body>
</html>
``` 你如果願意有所作為，就必須有始有終。(16) ```