|
一、今日学习内容： CSS3的2D转换 属性：transform 1、属性值translate translate(x,y) translateX translateY 特点 translate不会影响其他元素的位置 translate中的百分比单位指的是相对于元素自身的宽度和高度的百分比来确定的 利用2D转换试下定位盒子的水平和垂直居中，核心思想是先让盒子距离左侧50%的距离，距离顶部50%，再使用translate属性移动盒子本身高度和宽度的一半，对行内元素没有效果 2、rotate旋转角度 transform:rotate(度数) 度数为正数是顺时针旋转，度数为负数是逆时针旋转 3、2D转换中心点 transform-origin:x y;使用具体像素值时，移动的参照点是盒子的左上角 transform:right bottom; 4、缩放 transform:scale(4);宽高均放大4倍 transform:scale(2,3);宽放大2倍，高放大3倍 transform:scale(0.5，0.5);宽高均缩小0.5倍 scale缩放和宽高设置盒子大小的区别： width/height设置宽高时，上沿不动，只向下来改变宽高，会对其他的盒子有影响 scale进行缩放时，默认以盒子的中心点来进行缩放，并且不会影响其他的盒子 5、动画制作 ①概念 0%是动画的开始，100%是动画的结束，这样的规则叫动画序列 在@keyframes（关键帧）中固定CSS的样式，可以创建由当前样式转换的新样式的动画效果 可以改变任意多的样式和任意多的次数 可以使用百分比来规定变化发生的时间，或者使用"form""to"来实现，等同于0%-100% ②动画制作的步骤：定义动画、调用动画 ③动画的属性 @keyframes规定动画 animation简写属性 animation-name规定@keyframes动画的名称（必须） animation-duration规定动画万彩城一个周期需要多少秒（必须） animation-timing-function规定动画的有速度曲线，默认是ease animation-delay规定动画合适开始，默认是0 animation-iteration-count规定动画播放的次数，默认是1，infinite无限循环 animation-direction规定动画在下一周期是否逆向播放，默认是normal，alternate逆向播放 animation-play-state规定动画是否正在运行或者暂停，默认是running，paused暂停 animation-fill-mode规定动画结束后状态forwards保持，backwards回到起始 复合属性 animation:name duration timing-function delayiteration-count direction fill-mode; animation:move 5s linear 1s infinite alternate; animation:move 5s linear 1s forwards; ④动画的运动曲线 linear匀速、ease逐渐变慢、ease-in加速、ease-out减速、ease-in-out先加速后减速 步长steps()：指定了将整个动画分成多少小步来完成，如果有steps()就不需要其他的运动属性值了
流式布局和flex布局 1、移动端的基础 PC端常见的浏览器：Safari,Firefox,Chrome,uc,,百度,360等 移动端常见的浏览器：UC,夸克,QQ,百度,搜狗等 国内的UC，QQ，百度等浏览器都是根据Webkit修改过来的内核 兼容移动端主流的浏览器，主要关注Webkit内核的浏览器即可 2、手机屏幕的分辨率 移动端设备的屏幕尺寸非常多，碎片化比较严重 安卓设备的分辨率一般有：480×800、480×854、720×1280、1080×1920等，还有2K、4K屏幕 苹果设备的分辨率一般有：640×960、640×1136、750×1334、1242×2208、2778×1284等 作为开发者不需要关注这些分辨率，我们常用的尺寸单位是px 3、移动端调试的方法 Chrome DevTools的模拟手机调试 使用LiveServer启动网站，使用手机进行访问（手机和电脑要保持在一个局域网内） 使用外网服务器部署网站后，直接使用IP地址或者域名进行访问
二、今日问题：无
三、解决方案：无
| 
