弹性布局、动画、过渡
1.弹性布局
1.1 弹性容器：
元素上设置了display:flex;的元素就是弹性容器
1.2 弹性子元素：
元素上设置了display:flex;的元素就是弹性容器里面的直接子元素就是弹性子元素。
语法：display:flex;
1.3 主轴分布的设置：
|
justify-content flex-start flex-end center space-around:平均分布，两边有间距，两边的间距是中间的一半 space-between:平均分布，两边没有间距 space-evenly:平均分布，间距一样 |
1.3 侧轴分布的设置：
|
stretch:拉伸，会默认将没有设置高度的子元素拉伸到跟父元素一样的高度。设置了高度就没有效果 flex-start flex-end center |
换行
语法：flex-warp:warp
1.4 多行分布的设置：
|
align-content: flex-start flex-end center space-around:平均分布，两边有间距，两边的间距是中间的一半 space-between:平均分布，两边没有间距 space-evenly:平均分布，间距一样 |
Flex:数字；
对弹性子元素进行排序
order:数字
根据order的数字，进行从小到大排序
剩余空间的占据：
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .parent{ width: 100%; height: 800px; margin: 0 auto; border: 1px solid #000;
/*设置弹性容器*/ display: flex;
}
.db{ flex: 1; background: yellow; } .c1{ /*占据剩余空间的1份*/ flex: 2; background: green; }
.c2{ background: purple; width: 100px; }
</style> </head> <body> <div class="parent"> <!--db占据剩余空间3份中的1份--> <div class="db"></div> <!--c1是主要内容，占据剩余剩余空间3份中的2份--> <div class="child c1"></div> <!--假设c2是广告位，占100px宽度--> <div class="child c2"></div>
</div> </body> </html>
|
2.动画
Animation:动画
综合设置语法：animation: donghua 4s infinite;
分别设置：
|
/*动画*/ /*animation: donghua 5s;*/ /*动画的名称*/ animation-name: donghua; /*一次动画所花费的时间*/ animation-duration: 3s; /*动画的速度*/ animation-timing-function: linear; /*动画延迟时间*/ animation-delay: 3s; /*设置动画的次数*/ animation-iteration-count: 3; /*设置动画的往返*/ animation-direction: alternate; /*保留最后一刻状态*/ animation-fill-mode: forwards; |
分别设置：
不同状态写在关键帧里
|
@keyframes donghua{ 0%{ transform: translate(0,0); } 50%{ transform: translate(500px,0); } 100%{ transform: translate(500px,500px); } }
|
3.Transition过渡
综合设置：
transition: all 2s;
分别设置：
|
/*过渡效果*/ /*transition:height 2s,transform 3s,background 2s;*/ /*transition: all 2s linear;*/ /*过渡的属性*/ transition-property: all; /*过渡所消耗的时间*/ transition-duration: 2s; /*过渡变化的速度 linear线性速度 ease/ease-in/ease-out cubic-bezier(0.57,-0.34, 0.37, 1.44) * */ transition-timing-function: cubic-bezier(0.57,-0.34, 0.37, 1.44); /*过渡的延迟时间*/ /*transition-delay: 2s;*/ |
4.转换
2D转换
4.1 二维平面移动
语法：
transform:translateX(移动的距离) translateY(移动的距离);
Transform:translate(水平移动距离，垂直移动距离)
可以设置负值，水平的正值是向右移动，垂直的正值是向下移动
4.2 二维平面旋转
语法：
Transform:rotate(30deg);
旋转原点的设置
transform-origin:center(默认值)
可以设置left,top,right,bottom,center,
百分比设置：transform-origin:水平位置的百分比 垂直位置的百分比
4.3 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）这个坐标的向量，用这个向量作为轴进行旋转。
缩放
语法：
transform:scale(整体放大的倍数)
Transform:scale(水平缩放的倍数，垂直缩放的倍数)
倾斜
语法：transform: skew(15deg,0deg);
小技巧：如果先要文字板正，那么反倾斜即可
案例：
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #d1{ width: 300px; height: 300px; background: green; margin: 0 auto;
/*倾斜*/ transform: skew(15deg,0deg); }
h1{ transform: skew(-15deg,0deg); } </style> </head> <body> <div id="d1"> <h1>helloworld</h1> </div> </body> </html>
|
5.响应式
移动端：手机/平板/智能电视/智能手表/VR设备/AR设置
视窗viewport
|
<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
一套设计稿解决手机端的屏幕大小不一致问题
|
<meta name="viewport" content="width=750,user-scalable=no" /> |
响应式：
不同的屏幕的大小，显示不一样的内容。
手机端：背景蓝色
手机的显示分辨率：一般小于640px
平板：深蓝色
平板的分辨率：一般是大于640px，小于960px
Pc：黑色
