CSS3新特性（transform），过渡动画，动画，弹性布局，响应式
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>
