前端学习笔记 | CSS动画+移动web

一、平面转换

为元素添加动态效果，一般与过渡配合使用。

1、设置transition给元素本身，表示过渡变换方式和时间

2、在元素hover设置transform（动态效果）

• transform:
  • 【移动】translate(x方向，y方向) 、translateX（x、translateY(y) 位移
  • 【旋转】rotate(数字+deg）
  • 【缩放】scele(数字) 大于1放大，小于1缩小
  • 【倾斜】skew（数字+deg）

【案例】双开门、风车旋转

3、所有的转换都是沿着中心点，改变旋转中心，在元素本身设置属性transform-origin

• transform-origin：（x，y）
  • 也可设置center、right、bottom等方位词

【案例】时钟旋转

4、多重转换

多重转换以第一种转换形态的坐标轴为准:先平移再旋转

transform复合属性

        transform：translaate(x,y) rotate(360deg)

【案例】车轮

【补充】5、背景图的缩放效果

背景图可以通过设置background-size来配合hover实现缩放，而不用transform的scale

二、渐变

分类：线性渐变和径向渐变

• 线性渐变

background-image:linear-gradiant(

to 方位名词

颜色1 终点位置（写成百分比，可选）

颜色2 终点位置（写成百分比，可选）

...)

• 径向渐变

background-image:linear-gradiant(

半径 at 圆心位置

颜色1 终点位置

颜色2 终点位置

)

三、空间转换

1、空间平移

• transform：
  • translate3d（x,y,z）;
  • translateX（x）;
  • translateY（y）;
  • translateZ（z）;

2、视距-透视效果：近大远小、近远虚实

• perspective:数字+px(建议取值800-1000) 只能给直接父级添加，配合hover使用——给值过大，变化太小；给值过小，直接贴脸上（眼花）
• 配合transform的rotateX(deg)和rotateZ使用，可以让旋转效果更立体

3、旋转

左手法则：左手握住旋转轴，拇指指向正的方向，四指方向为旋转正值方向。

4、立体呈现

（1）transform-style:

• preserve-3d 设置立方体处在3D空间
• flat（默认）平面

（2）子级定位

5、空间缩放

translate:

• scale3d(数字)
• scaleX(数字)
• scaleY(数字)
• scaleZ(数字)

四、动画

书写步骤：

1、定义动画

2、使用动画

animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态

• 速度曲线:liner-匀速 step（数字）-配合精灵动画
• 延迟时间：如果出现两个时间，第一个时动画时长
• 重复次数：数字-几次 infinite-无限循环
• 动画方向：alternative 反向
• 执行完毕时状态：backwards-开始状态 forwards-结束状态

3、animation属性

animation-name 动画名称

animation-duration 动画时长

animation-delay 延迟时间

animation-fill-mode 动画执行完毕时状态

animation-timing-function 速度曲线

animation-iteration-count 重复次数

animation-direction 动画执行方向

animation-play-state 暂停动画

五、移动适配方案

• 宽度适配：宽度自适应
  • 百分比布局
  • flex布局
• 等比适配：宽高等比缩放
  • rem
  • vm

一种写法：less

1、屏幕分辨率

（1）物理分辨率（2）逻辑分辨率

2、书写步骤

（1）添加视口标签

meta name="viewpoint" （简写：自动填充）

（2）二倍图

防止图片在高分辨率屏幕下模糊失真。现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿，二倍图设计稿尺寸：750px。

六、rem适配方案 

1、给HTML标签添加字号

媒体查询

（1）自己写：@media(宽度){

        选择器{

        CSS属性

                }

}

（2）引用移动适配的JS文件，放到body最后面

2、使用rem单位书写尺寸

3、目前rem布局方案中，将玩个分成10份，HTML标签的字号为视口宽度的1/10

eg.视口宽度为375px，则1rem=37.5px

七、less 

vscode插件：EasyLess

1、less运算

（1）加减乘除均可运算

触发需要单独加括号

{

width:(65 / 37.5rem)

}

（2）如果表达式有多个单位，以第一个单位为主

2、less嵌套

快速生成后代选择器

&：hover中&表示当前选择器，不会生成后代

3、less变量

容器，存储数据——方便使用和修改

语法：

• 定义变量：@变量名：数据
• 使用变量：CSS属性：@变量名

4、less导入与导出

(1)导入：@import '路径';

(2)导出：//out

(3)禁止导出

//out:false

八、vw适配方案

1vw=1/300视口宽度

1vh=1/300视口高度

vw和vh最好不要混用，需要统一，防止不同设备视口比例不同引起布局比例不同。