1.CSS3新特性
1）轉換
[1]2D轉換
二維平面移動
語法：
transform:translateX(移動的距離) translateY(移動的距離);
Transform:translate(水平移動距離，垂直移動距離)
可以設置負值，水平的正值是向右移動，垂直的正值是向下移動
二維平面旋轉
語法：
Transform:rotate(30deg);
旋轉原點的設置
transform-origin:center(默認值)
可以設置left,top,right,bottom,center,
百分比設置：transform-origin:水平位置的百分比 垂直位置的百分比
[2]3D轉換
透視點
在所看元素的父元素或者是祖先元素上設置透視點
語法:perspective: 1000px;
三維立體的移動
語法：
transform: translateZ(200px);
transform: translate3d(水平移動,垂直移動,z軸移動);
z軸：z軸垂直於屏幕，方向是射向我們。
三維立體的旋轉
語法：
/*transform: rotateX(30deg);*/
/*transform: rotateY(30deg);*/
/*transform: rotateZ(30deg);*/
transform: rotate3d(1,1,1,30deg);
解析：rotate3d(x,y,z,30deg),用x,y,z建立一個用原點射向（x,y,z）這個坐標的向量，用這個向量作為軸進行旋轉。
2)縮放
語法：
transform:scale(整體放大的倍數)
Transform:scale(水平縮放的倍數，垂直縮放的倍數)
3)傾斜
語法：transform: skew(15deg,0deg);
小技巧：如果先要文字板正，那么反傾斜即可
案例：
1 <!DOCTYPE html> 2 3 <html> 4 5 <head> 6 7 <meta charset="UTF-8"> 8 9 <title></title> 10 11 <style type="text/css"> 12 13 #d1{ 14 15 width: 300px; 16 17 height: 300px; 18 19 background: green; 20 21 margin: 0 auto; 22 23 24 25 /*傾斜*/ 26 27 transform: skew(15deg,0deg); 28 29 } 30 31 32 33 h1{ 34 35 transform: skew(-15deg,0deg); 36 37 } 38 39 </style> 40 41 </head> 42 43 <body> 44 45 <div id="d1"> 46 47 <h1>helloworld</h1> 48 49 </div> 50 51 </body> 52 53 </html>
2.過渡動畫
Transition過渡
綜合設置：
transition: all 2s;
分別設置：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 #d1{ 8 width: 200px; 9 height: 200px; 10 background: skyblue; 11 transform: rotate(0deg); 12 13 /*過渡效果*/ 14 /*transition:height 2s,transform 3s,background 2s;*/ 15 /*transition: all 2s linear;*/ 16 /*過渡的屬性*/ 17 transition-property: all; 18 /*過渡所消耗的時間*/ 19 transition-duration: 2s; 20 /*過渡變化的速度 21 linear線性速度 22 ease/ease-in/ease-out 23 cubic-bezier(0.57,-0.34, 0.37, 1.44) 24 * */ 25 transition-timing-function: cubic-bezier(0.57,-0.34, 0.37, 1.44); 26 /*過渡的延遲時間*/ 27 /*transition-delay: 2s;*/ 28 } 29 /*鼠標懸浮上去的狀態*/ 30 #d1:hover{ 31 height: 400px; 32 transform: rotate(360deg); 33 background: purple; 34 } 35 </style> 36 </head> 37 <body> 38 <div id="d1"> 39 40 </div> 41 </body> 42 </html>
3.動畫
Animation:動畫
綜合設置語法：animation: donghua 4s infinite;
分別設置：
1 /*動畫*/ 2 3 /*animation: donghua 5s;*/ 4 5 /*動畫的名稱*/ 6 7 animation-name: donghua; 8 9 /*一次動畫所花費的時間*/ 10 11 animation-duration: 3s; 12 13 /*動畫的速度*/ 14 15 animation-timing-function: linear; 16 17 /*動畫延遲時間*/ 18 19 animation-delay: 3s; 20 21 /*設置動畫的次數*/ 22 23 animation-iteration-count: 3; 24 25 /*設置動畫的往返*/ 26 27 animation-direction: alternate; 28 29 /*保留最后一刻狀態*/ 30 31 animation-fill-mode: forwards;
不同狀態寫在關鍵幀里
@keyframes donghua{
0%{
transform: translate(0,0);
}
50%{
transform: translate(500px,0);
}
100%{
transform: translate(500px,500px);
}
}
案例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 7 <style type="text/css"> 8 #d1{ 9 width: 300px; 10 height: 200px; 11 background: skyblue; 12 13 /*動畫*/ 14 /*animation: donghua 5s;*/ 15 /*動畫的名稱*/ 16 animation-name: donghua; 17 /*一次動畫所花費的時間*/ 18 animation-duration: 3s; 19 /*動畫的速度*/ 20 animation-timing-function: linear; 21 /*動畫延遲時間*/ 22 animation-delay: 3s; 23 /*設置動畫的次數*/ 24 animation-iteration-count: 3; 25 /*設置動畫的往返*/ 26 animation-direction: alternate; 27 /*保留最后一刻狀態*/ 28 animation-fill-mode: forwards; 29 30 } 31 32 33 @keyframes donghua{ 34 0%{ 35 transform: translate(0,0); 36 } 37 50%{ 38 transform: translate(500px,0); 39 } 40 100%{ 41 transform: translate(500px,500px); 42 } 43 } 44 45 </style> 46 </head> 47 <body> 48 <div id="d1"> 49 50 </div> 51 </body> 52 </html>
4.彈性布局
1）彈性容器：
元素上設置了display:flex;的元素就是彈性容器
2）彈性子元素：
元素上設置了display:flex;的元素就是彈性容器里面的直接子元素就是彈性子元素。
語法：display:flex;
[1]主軸分布的設置：
1 justify-content: 2 3 flex-start 4 5 flex-end 6 7 center 8 9 space-around:平均分布，兩邊有間距，兩邊的間距是中間的一半 10 11 space-between:平均分布，兩邊沒有間距 12 13 space-evenly:平均分布，間距一樣
[2]側軸分布的設置：
1 Align-items: 2 3 stretch:拉伸，會默認將沒有設置高度的子元素拉伸到跟父元素一樣的高度。設置了高度就沒有效果 4 5 flex-start 6 7 flex-end 8 9 center
[3]換行
語法：flex-warp:warp
[4]多行分布的設置：
align-content:
flex-start
flex-end
center
space-around:平均分布，兩邊有間距，兩邊的間距是中間的一半
space-between:平均分布，兩邊沒有間距
space-evenly:平均分布，間距一樣
2)剩余空間的占據：
Flex:數字；
1 <!DOCTYPE html> 2 3 <html> 4 5 <head> 6 7 <meta charset="utf-8" /> 8 9 <title></title> 10 11 <style type="text/css"> 12 13 .parent{ 14 15 width: 100%; 16 17 height: 800px; 18 19 margin: 0 auto; 20 21 border: 1px solid #000; 22 23 24 25 26 27 /*設置彈性容器*/ 28 29 display: flex; 30 31 32 33 } 34 35 36 37 .db{ 38 39 flex: 1; 40 41 background: yellow; 42 43 } 44 45 .c1{ 46 47 /*占據剩余空間的1份*/ 48 49 flex: 2; 50 51 background: green; 52 53 } 54 55 56 57 .c2{ 58 59 background: purple; 60 61 width: 100px; 62 63 } 64 65 66 67 68 69 </style> 70 71 </head> 72 73 <body> 74 75 <div class="parent"> 76 77 <!--db占據剩余空間3份中的1份--> 78 79 <div class="db"></div> 80 81 <!--c1是主要內容，占據剩余剩余空間3份中的2份--> 82 83 <div class="child c1"></div> 84 85 <!--假設c2是廣告位，占100px寬度--> 86 87 <div class="child c2"></div> 88 89 90 91 </div> 92 93 </body> 94 95 </html>
3)對彈性子元素進行排序
order:數字
根據order的數字，進行從小到大排序
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 .parent{ 8 width: 800px; 9 height: 800px; 10 margin: 0 auto; 11 border: 1px solid #000; 12 13 /*設置彈性容器*/ 14 display: flex; 15 } 16 17 .child{ 18 width: 200px; 19 height: 200px; 20 } 21 /* 22 對彈性子元素進行排序 23 order:數字 24 根據order的數字，進行從小到大排序 25 * */ 26 .c1{ 27 background: green; 28 order: 2; 29 } 30 31 .c2{ 32 background: purple; 33 order: 3; 34 } 35 36 .c3{ 37 background: pink; 38 order: 1; 39 } 40 </style> 41 </head> 42 <body> 43 <div class="parent"> 44 <div class="child c1">1</div> 45 <div class="child c2">2</div> 46 <div class="child c3">3</div> 47 48 </div> 49 </body> 50 </html>
5.響應式
1）移動端響應式解決方案
移動端：手機/平板/智能電視/智能手表/VR設備/AR設置
[1]視窗viewport(webstorm 快捷鍵：meta:vp)
| <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> |
width=device-width ：width等於設備的系統顯示寬度
initial-scale=1 ：后面4個最終決定不允許任何的縮放。
minimum-scale=1
maximum-scale=1
user-scalable=no
案例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 7 </head> 8 <body> 9 <h1>helloworld</h1> 10 <p>hello蔡徐坤</p> 11 </body> 12 </html>
[2]一套設計稿解決手機端的屏幕大小不一致問題
| <meta name="viewport" content="width=750,user-scalable=no" /> |
案例;
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <meta name="viewport" content="width=750,user-scalable=no" /> 7 </head> 8 <body> 9 <div style="width: 375px;height: 375px;background: skyblue;"> 10 11 </div> 12 </body> 13 </html>
2)響應式：
不同的屏幕的大小，顯示不一樣的內容。
手機端：背景藍色
手機的顯示分辨率：一般小於640px
平板：紫色
平板的分辨率：一般是大於640px，小於960px
Pc：黑色
pc的分辨率：一般是大於1400px
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 7 <style type="text/css"> 8 .d1{ 9 width: 600px; 10 height: 400px; 11 background: orange; 12 } 13 /*媒體查詢*/ 14 /*小於等於640px的分辨率*/ 15 16 @media only screen and (max-width:640px ) { 17 .d1{ 18 background: skyblue; 19 } 20 } 21 22 /*范圍在640px-960px之間*/ 23 @media only screen and (min-width: 640px) and (max-width: 960px) { 24 .d1{ 25 background: purple; 26 } 27 } 28 29 /*大於1400px*/ 30 @media only screen and (min-width:1400px ) { 31 .d1{ 32 background: black; 33 } 34 } 35 </style> 36 </head> 37 <body> 38 <div class="d1"> 39 40 </div> 41 </body> 42 </html>