css之過渡、變換
阿新 • • 發佈：2019-01-02
一.過渡
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>過渡</title> 6 <style type="text/css"> 7 body{ 8 height: 500px; 9 border: 1px solid red; 10 position: relative; 11 }12 div{ 13 width: 100px; 14 height: 100px; 15 background: red; 16 position: absolute; 17 left: 0; top: 0; 18 transition: 5s all cubic-bezier(0.570, -0.440, 0.520, 1.430); 19 } 20 body:hover div{ 21 left: 800px; 22 } 23 </style> 24 </head> 25 <body> 26 <!-- 27 過渡,就是從一個值到另一個值之間的過程,就是過渡 28 29 transition 30 比如: 31 transition: 1s 1s all ease; 後三個值可以省略 32 33 第一個值:過渡的總時間 單位是s或ms 34 35 第二個值:延遲過渡的時間 單位是s或ms36 37 第三個值:需要過渡的樣式 38 39 第四個值:過渡的方式 40 linear 勻速 41 ease 慢速開始,然後慢慢變快 42 ease-in 慢速開始 43 ease-out 慢速結束 44 ease-in-out 開始和結束都滿 45 cubic-bezier(1,0,1,0) 貝瑟爾曲線 46 貝瑟爾曲線工具: 47 http://xuanfengge.com/easeing/ceaser/ 48 --> 49 <div></div> 50 </body> 51 </html>
二.變換
2.1 transform之translate位移
變換
transform
位移
屬性translateX()x軸的位置,正值往右,負值往左
屬性translateY()y軸的位置,正值往下,負值往上
translate(x軸的位移量,y軸的位移量)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>變換</title> 6 <style type="text/css"> 7 body{ 8 height: 500px; 9 border: 10 1px solid red; 11 } 12 div{ 13 width: 100px; 14 height: 100px; 15 background: red; 16 transition: 1s; 17 } 18 body:hover div{ 19 transform:translate(100px,200px); 20 } 21 </style> 22 </head> 23 <body> 24 <div></div> 25 </body> 26 </html>
2.2 transform之變換rotate
旋轉
rotate() 接收的是一個度數deg,正值順時針,負值逆時針
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>變換</title> 6 <style type="text/css"> 7 body{ 8 height: 500px; 9 border: 10 1px solid red; 11 } 12 div{ 13 width: 100px; 14 height: 100px; 15 background: red; 16 margin: 100px auto; 17 transition: 1s; 18 } 19 body:hover div{ 20 transform:rotate(45deg); 21 } 22 </style> 23 </head> 24 <body> 25 <div></div> 26 </body> 27 </html>
2.3 transform之縮放scale
縮放
屬性scale()接收的是數值,可以使浮點數 當大於1--放大效果;小於1 是縮小效果
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>變換</title> 6 <style type="text/css"> 7 body{ 8 height: 500px; 9 border: 10 1px solid red; 11 } 12 div{ 13 width: 100px; 14 height: 100px; 15 background: red; 16 margin: 100px auto; 17 transition: 1s; 18 } 19 body:hover div{ 20 transform:scale(2); 21 } 22 </style> 23 </head> 24 <body> 25 <div></div> 26 </body> 27 </html>
2.4 transform之斜切skew
斜切
接收的是旋轉角度
屬性skewX()x軸的斜切角度
屬性skewY()
y軸的斜切角度
skew(30deg,30deg)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>變換</title> 6 <style type="text/css"> 7 body{ 8 height: 500px; 9 border: 10 1px solid red; 11 } 12 div{ 13 width: 100px; 14 height: 100px; 15 background: red; 16 margin: 100px auto; 17 transition: 1s; 18 } 19 body:hover div{ 20 transform: skew(40deg,45deg); 21 } 22 </style> 23 </head> 24 <body> 25 <div></div> 26 </body> 27 </html>
2.5 變換原點及解析位置
原點預設是center中心,解析按照程式碼順序解析
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>變換原點及解析順序</title> 6 <style type="text/css"> 7 body{ 8 width: 800px; 9 height: 600px; 10 border: 1px solid purple; 11 } 12 div{ 13 width: 100px; 14 height: 100px; 15 background: red; 16 margin-top: 130px; 17 transition: 1s; 18 transform-origin: left top;/*從左上為原點變換 */ 19 } 20 body:hover #box1{ 21 transform: scale(2) translate(200px,0); 22 /*解析順序:先擴大兩倍,再向x正半軸位移200px*/ 23 } 24 body:hover #box2{ 25 transform:translate(200px,0) scale(2); 26 /*解析順序:先向x正半軸位移200px,再擴大兩倍*/ 27 } 28 </style> 29 </head> 30 <body> 31 <div id="box1"></div> 32 <div id="box2"></div> 33 <!-- 34 變換原點 35 transform-origin: 36 left top 37 right bottom 38 center 39 預設是center 當設定相應的值後,會按照相應的設定的值發生變換 40 41 --> 42 </body> 43 </html>