移动Web
1 字体图标
1.1 字体图标的优点：
- 灵活性：灵活地修改样式，例如：尺寸、颜色等
- 轻量级：体积小、渲染快、降低服务器请求次数
- 兼容性：几乎兼容所有主流浏览器
2 平面转换
transform（实现元素的位移、旋转、缩放等效果）
- 改变盒子在平面内的形态（位移、旋转、缩放）
- 2D 转换 l 平面转换属性
使用translate实现元素位移效果
语法
- transform: translate(水平移动距离, 垂直移动距离); l
取值（正负均可）
- 像素单位数值
- 百分比（参照物为盒子自身尺寸）
注意：X轴正向为右，Y轴正向为下 l
技巧
- translate()如果只给出一个值, 表示x轴方向移动距离
- 单独设置某个方向的移动距离：translateX() & translateY()
使用translate快速实现绝对定位的元素居中效果
方法一：
方法二：
原理：位移取值为百分比数值，参照盒子自身尺寸计算移动距离
2.1 使用translate实现元素位移效果（右侧盒子背景图）
右侧盒子背景图
- left：向左侧移动自身宽度
- right：向右侧移动自身宽度
2.2 使用rotate实现元素旋转效果
语法
-
transform: rotate(角度);
-
注意：角度单位是deg
技巧：取值正负均可
- 取值为正, 则顺时针旋转
- 取值为负, 则逆时针旋转
2.3 使用transform-origin属性改变转换原点
语法
- 默认圆点是盒子中心点
- transform-origin: 原点水平位置 原点垂直位置;
取值
- 方位名词（left、top、right、bottom、center）
- 像素单位数值
- 百分比（参照盒子自身尺寸计算）
2.4 使用transform复合属性实现多形态转换
transform:translate() rotate();
多重转换原理
- 旋转会改变网页元素的坐标轴向
- 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
2.5 使用scale改变元素的尺寸
语法
- transform: scale(x轴缩放倍数, y轴缩放倍数); l
技巧
- 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
- transform: scale(缩放倍数);
- scale值大于1表示放大, scale值小于1表示缩小
渐变
3 空间转换
使用transform属性实现元素在空间内的位移、旋转、缩放等效
属性：transform
语法
- transform: translate3d(x, y, z);
- transform: translateX(值);
- transform: translateY(值);
- transform: translateZ(值);
取值（正负均可）
- 像素单位数值
- 百分比
3.1 使用perspective属性实现透视效果
属性（添加给父级）
- perspective: 值;
- 取值：像素单位数值， 数值一般在800 – 1200。
- 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离
作用
- 空间转换时，为元素添加近大远小、近实远虚的视觉效果
3.2 使用rotate实现元素空间旋转效果
语法
- transform: rotateZ(值);
- transform: rotateX(值);
- transform: rotateY(值);
左手法则
- 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
- rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
- x，y，z 取值为0-1之间的数字
3.3 使用transform-style: preserve-3d呈现立体图形
实现方法
- 父元素添加 transform-style: preserve-3d;
- 使子元素处于真正的3d空间
使用scale实现空间缩放效果
- transform: scaleX(倍数);
- transform: scaleY(倍数);
- transform: scaleZ(倍数);
- transform: scale3d(x, y, z);
4 动画
4.1 使用animation添加动画效果
定义动画：
animation: 动画名称 动画花费时长;
animation:动画名称 动时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
注意：
- 动画名称和动画时长必须赋值
- 取值不分先后顺序
- 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
4.2 使用animation相关属性控制动画执行过程
使用steps实现逐帧动画
4.3精灵动画制作步骤
准备显示区域
- 设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
定义动画
- 改变背景图的位置（移动的距离就是精灵图的宽度）
使用动画
- 添加速度曲线steps(N)，N与精灵图上小图个数相同
- 添加无限重复效果
4.4 移动端特点
视口
视口 目标：使用meta标签设置视口宽度，制作适配不同设备宽度的网页 l 手机屏幕尺寸都不同， 网页宽度为100% l 网页的宽度和逻辑分辨率尺寸相同。
使用meta标签设置视口宽度，制作适配不同设备宽度的网页 l 目标：网页宽度和设备宽度(分辨率)相同。 l 解决办法：添加视口标签。 l 视口：显示HTML网页的区域，用来约束HTML尺寸。
响应式布局的容器 固定宽度
超小屏时其宽度为 100%
bootstarp中页面元素一般需要用它或container-fluid容器来包裹
Bootstarp的缺点有哪些
会有兼容问题
组件的样式很少
响应式开发的原理
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的
标签：Web,动画,缩放,transform,旋转,宽度,开发,移动,取值 From： https://www.cnblogs.com/LuckFairy/p/17055917.html