CSS3(2)--- 過渡(transition)
阿新 • • 發佈：2019-12-17
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)<