前端学习笔记 | 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、定义动画

前端学习笔记 | CSS动画+移动web_第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 '路径';

前端学习笔记 | CSS动画+移动web_第2张图片

(2)导出://out

前端学习笔记 | CSS动画+移动web_第3张图片

(3)禁止导出

//out:false

八、vw适配方案

1vw=1/300视口宽度

1vh=1/300视口高度

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

你可能感兴趣的:(前端,前端,html,css,笔记,学习)