1、過渡 transition
過渡屬性用法： transition :ransition-property transition-duration transition-timing-function transition-delay
可以一起指定也可以分別單獨指定
transition-property: 是要過渡的屬性（如width，height），all是所有都改變。
transition-duration：花費的時間，單位為s或ms
transition-timing-function：是指定動畫類型（運動區曲線），運動曲線有以下幾種
ease=>逐漸慢下來（默認值） linear=>勻速 ease-in=>加速 ease-out=>減速 ease-in-out=>先加速在減速
transition-delay 延遲時間，單位為s或ms
| <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100px; height: 200px; background-color: aqua; transition: width 2s ease-in-out 0.5s; } div:hover { width: 500px; } </style></head><body> <div></div></body></html> |
結果如下，當鼠標上上去后變化不再是瞬間完成，而是過渡完成。
2、變形 transform
(1)、2D變形
（a）移動 translate(x,y)
移動可以指定像素值也可以指定百分比， 注意：指定百分比是自身大小的百分比，因此可以用于設置盒子定位時的居中對齊（在設置left：50%后再移動自身的-50%即可）。
| <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: aqua; transition: all 2s; } div:active { transform: translate(200px, 200px); } </style></head><body> <div></div></body></html> |
點擊之后盒子進行了移動。用于讓定位的盒子居中的代碼入下
| <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .fa { width: 300px; height: 300px; background-color: aqua; transition: all 0.5s; position: relative; } .son { background-color: red; position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; transform: translate(-50%, -50%); } </style></head><body> <div class="fa"> <div class="son"></div> </div></body></html> |
