一今日学习内容：css的2d转换：
属性：transform
属性值：translate
translate（x，y）对盒子进行x轴和y轴的位移
translateX（n）对盒子进行x轴的位移
translateY（n）对盒子进行y轴的位移
特点：不会影响其他元素的位置；百分比单位指的是相对元素的宽度和高度的百分比来确定的translate（50%，50%），第一个50%指宽度的百分之50，第二个指高度的50%
利用2d转换实现定位盒子的水平和垂直居中
核心思想：先让盒子距离左侧50%的距离，距离顶部50%的距离，再使用translate属性移动盒子本身高度和宽度的一半。
对行内元素没有效果。
属性值：rotate旋转角度
语法：transform：rotate（度数），单位是deg，度数为正数时顺时针旋转，为负数代表逆时针旋转。
2d转换中心点
语法：tran-origin：x，y；使用具体的像素单位来进行中心设置，移动的参照点事盒子的左上角
transform-origin：tight bottom；可以使用方位名词来进行中心点设定，方位名词有right、left、bottom、center和top。
2d转换缩放
使用方法：transform：scale（4）；代表宽和高都放大四倍
transform：scale（2,3）代表宽放大2倍，高放大3倍
transform：scale（0.5,0.5）代表宽度和高度都变为原来的一半
scale缩放和width/height设置盒子大小的区别
width/height设置宽高时，上沿不动，只向下来改变宽高，会对其它的盒子有影响
scale进行缩放时，默认以盒子的中心点来进行缩放，并且不会影响其他的盒子
css的动画制作
动画序列：0%是动画的开始，100%是动画的结束，这规则叫做动画序列。
在@keyframes中固定css的样式，可以创建由当前样式转化为新样式的动画效果
可以改变任意多的样式和任意多的次数
可以使用百分比来规定变化发生的时间，或者使用关键字from和to来实现等同于0%~100%
动画制作的步骤：定义动画；调用动画。
动画的属性：@keyframes 规定动画； animation 简写属性；animation-name 调用 animation-duration运动一个周期花费的时间s
animation-timing-function规定动画的速度曲线，默认是0，steps（5），将整个动画分为5部分进行完成，不再是一个连贯的动画动作了
delay开始时间，单位s；iteration-count规定默认为1，infinite为无限循环，direction 默认值normal，逆向播放，alternate
fill-mode 规定结束的后状态保持还是回到起始
play-state 规定动画正在允许是否暂停
复合属性
动画的运动曲线
常规的运动曲线和步长（steps）。指定整个动画分为多少步完成，两者只需要一个即可
swiper制作轮播图
swiper的其他样式
寻找需要的样式在新的窗口打开；复制源码；修改文件路径；将js代码中的类名和整个swiper盒子的类名保持一致；修改自己需要的结构和样式即可。
流式布局和flex布局
移动端的基础：
pc端常见的浏览器：Safari、火狐、谷歌、百度、uc、360等等。
移动端常见的浏览器：uc、夸克、qq、百度手机、搜狗手机等等。
国内的uc和qq，百度等浏览器都是根据webkit修改过来的内核，国内目前没有自己研发的浏览器内核。
总结：兼容移动端主流的浏览器，只有关注webkit内核的浏览器即可。
手机屏幕的分辨率
移动端设备的屏幕尺寸非常多，碎片化比较严重。
安卓设备的分辨率一般有：480x800,480x854,720x1280,1080x1920，2k，4k等等。
苹果设备的分辨率一般有：640x960,640x1136,750x1334，1242x2208,2778x1284等等。
作为开发者不需要关注这些分辨率，我们常用的尺寸单位是px。
Chrome DevTools的模拟手机调试
使用livesever启动网站，使用手机进行访问（手机和电脑必须在同一个局域网中）
使用外网服务器部署网站后，直接使用ip地址或者域名进行访问
|
