前端移动web-day06学习笔记

01-transition过渡动画

• 1.在前端开发中，如果不使用JS代码，要想实现元素从A状态变成B状态，并且中间的过程可以被观察到，那么就可以使用css中的过渡属性:transition
• 2.transition属性是一个复合属性，类似于基础班的background、border等
• 3.transition属性值介绍
  • 官网文档传送门:http://www.w3school.com.cn/cssref/pr_transition.asp
  • transition-property:需要过渡的属性
    • 一般为all，对所有属性生效
  • transition-duration:需要过渡的时间
    • 必须设置：因为默认值为0，没有动画
    • 例如1s，表示过渡动画时间为1秒
  • transition-timing-function：需要过渡的方式
    • 默认值ease:由快到慢
    • 一般设置为linear:表示匀速
  • transition-delay:延迟时间
    • 例如3s，表示动画从3秒之后才开始
    • 一般无需设置，默认为0，立即开始

transition-timing-function速度曲线

细节注意点：

• （1）如果在horver中设置transition属性，那么只有鼠标移入才有动画，移出没有动画
  • 因为鼠标移出之后，horver中的transition也被移除
• （2）如果希望多个属性分开移动，则可以设置多组transition属性，每一组用逗号,隔开
  • transition: width 2s , height 2s 2s;

==02-transform属性2D转换==

transform属性介绍

• ==注意：transform是一个属性名，后面所要学习的平移、旋转、缩放、倾斜都是它的属性值==
  • css属性语法： 属性名:属性值;
  • transform也是一个复合属性，可以同时设置多个值
  • 官方文档传送门:http://www.w3school.com.cn/cssref/pr_transform.asp
  • 常用的属性值为以下几个
    • 平移：transform: translate()
    • 旋转：transform: rotate()
    • 缩放：transform:scale()
    • 倾斜(不常用):transform:skew()
    • 视距(3D专用):perspective()

1.1-2D平移translate

2D转换平移方式改变元素位置

1. 基本语法：transform: translate(x,y)
2. 总结：

a.最多只能设置两个值，第一个值表示水平位置（x方向）,第二个值表示垂直位置（y方向）

b.如果只设置一个值，则表示水平方向

c.如果值为负数，元素则反方向移动

d.如果值为百分比，则相对于元素自身的宽高百分比

1.2-2D旋转rotate

2D旋转

1.基本语法:transform: rotate(角度)

2.总结：

a.只有一个值，表示旋转的角度(单位deg)

b.角度值为正数：顺时针旋转 负数：逆时针旋转

1.3-修改元素旋转基准点

• 1.默认情况下，元素在旋转的时候，是以自身的中心点作为旋转原点的，又称为旋转基准点
• 2.如果想要修改元素的基准点，则可以使用:transform-origin属性
• 3.设置基准点 a. 默认值为元素中心点 b. 左：left 右：right 上：top 下：bottom transform-origin: 100px 100px;可以设置具体的坐标点 transform-origin*: left bottom;也可以设置元素自身的顶点
• ==4.transform-origin修改元素的基准点不仅仅只是作用于旋转，也可以作用于即将学习的缩放与倾斜==

1.4-2D缩放scale

2D缩放

1. 基本语法:transform: scale(x,y)
2. 总结：

a.第一个值表示水平缩放比例（宽度），第二个值表示垂直缩放比例（高度）

b.如果只设置一个值，表示宽度和高度同时缩放相应的比例

c.缩小： 0-1之间的小数 放大： 大于1的数字

d.transform-origin：设置2d转换基准点（作用于旋转、缩放、倾斜）

1.5-2D倾斜skew（了解）

2D倾斜（扭曲）

1. 基本语法： transform: skew(x角度,y角度)
2. 总结：

a.第一个值表示x方向倾斜角度，第二个值表示y方向倾斜角度

b.如果只设置一个值，表示x方向倾斜角度

03-transform属性3D转换

3D转换介绍

==默认情况下，我们的电脑屏幕是二维的，无法呈现Z轴效果，如果想要看到3D效果必须要设置视距属性==

perspective: 800px;一般视距范围600-100px

倾斜Skew只有X轴Y轴，没有Z轴，但是可以用3d矩阵变换来实现matrix3d（了解即可）

1.1-3D视距perspective与位移

• 1.视距：视觉的距离
  • 相当于模拟出一个“眼睛”看物体的距离，遵循近大远小的规则
  • perspective: 800px;
• 2.3D位移 translate：既可以平移x轴，也能平移y轴 tranelateX：仅仅x轴平移 tranelateY：仅仅Y轴平移 tranelateZ：仅仅Z轴平移

1.2-3D缩放

3d转换缩放:*transform*: scaleX(2) scaleY(2) scaleZ(2);

a. scaleX和scaleY相当于2d转换scale(x,y)

b. scaleZ相当于改变物体厚度(立方体有效)，单独使用无效果(少用)

04-animation帧动画

1.1-animation动画介绍

• 1.transition动画存在的问题

a. 动画不能自动开始(需要配合horver使用)

b. 动画次数固定一次

• 2.animation动画（帧动画，也可以叫做补间动画）

a.可以自动开始

b.次数不限

• 3.语法介绍
• 课外学习传送门:http://www.w3school.com.cn/cssref/pr_animation.asp

1.3-（了解）animation动画属性介绍

1.4-（了解）animation多状态动画

1.5-（了解）animation百分比实现多状态动画