学习知识点

转换

什么是转换

改变元素在页面中的位置，大小，角度，以及形状即为转换

transform

1. translate()位移
2. scale()缩放（scale(n)
   n>1
   x轴和y轴都放大
   n=1
   x轴和y轴保持原尺寸
   0<n<1
   x轴和y轴都缩小
   -1<n<0
   x轴和y轴都缩小，并反转
   n<-1
   x轴和y轴都放大，并反转
   scale属性取值）
3. rotate(n deg)旋转【正数顺时针，负数逆时针】
4. skew()倾斜

transform-style

嵌套元素在3D空间显示（flat：子元素将不保留其3d位置；；preserve-3d：子元素将保留其3d位置）

转换原点

transform-origin（可用px、%、以及关键字（x:left/center/right；x:left/center/right））

取值个数为2为2D上位置；取值个数为3是3D个数方位；

过渡

过渡是使css的值，在一段时间内平缓变化的效果。过度的代码要写在原本样式中，过渡效果有去有回，如果写在hover中，过渡效果有去无回

使用transition属性

1. 使用过渡，要设置两个css的状态(开始的值和结束的值)
2. 过渡代码的编写位置，写在原来选择器中，过渡效果，有去有回，如果写在hover中，过渡效果，有去无回

动画

将多个过渡放在一起，使用关键帧来控制动画的每一个状态，使得元素从一种样式逐渐变化为另一种样式

声明动画

​ @keyframes 名称{
​ 0%{ /代码样式/ }
​ 50%{ /代码样式/ }
​ 100%{ /代码样式/ }
}

使用动画用animation属性

今天李老师讲了很多东西，之前练习的时候用过一点，所以不是太陌生，我们还需努力