2D转换及动画效果

今日框架：

今日重点：
一、2D转换：2D 转换是改变标签在二维平面上的位置和形状
1、translate 移动
1）语法：transform: translate(x, y)
2）重点知识点
（1）2D 的移动主要是指 水平、垂直方向上的移动
（2）translate 最大的优点就是不影响其他元素的位置
（3）translate 中的100%单位，是相对于本身的宽度和高度来进行计算的
（4）行内标签没有效果
2、让一个盒子水平垂直居中
transform: translate（-50%，-50%）
3、rotate 旋转 ：2D 旋转指的是让元素在二维平面内顺时针或者逆时针旋转
1）语法：transform: rotate(0deg);（属性值为 rotate(角度)）
2）重点知识点
（1）rotate 里面跟度数，单位是 deg
（2）角度为正时，顺时针，角度为负时，逆时针
（3）默认旋转的中心点是元素的中心点
4、三角
利用伪元素，给盒子加两个边框，再旋转
5、transform-origin 设置元素旋转中心点
1）语法：transform-origin: x y;
2）重要知识点
（1）注意后面的参数 x 和 y 用空格隔开
（2）x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center
（3）还可以给 x y 设置像素或者方位名词(top、bottom、left、right、center)
6、scale 缩放 ：用来控制元素的放大与缩小
1）语法：transform: scale(x, y)
2）知识要点
（1）注意，x 与 y 之间使用逗号进行分隔
（2）transform: scale(1, 1): 宽高都放大一倍，相当于没有放大
（3）transform: scale(2, 2): 宽和高都放大了二倍
（4）transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致
（5）transform:scale(0.5, 0.5): 缩小
（6）scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子
7、skew 拉伸
语法：transform：skew（45deg，45deg）
8、 2D 转换综合写法以及顺序问题
1）知识要点
（1）同时使用多个转换，其格式为 transform: translate() rotate() scale()
（2）顺序会影响到转换的效果(先旋转会改变坐标轴方向)
（3）但我们同时有位置或者其他属性的时候，要将位移放到最前面
二、动画(animation)：可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果
1、基本使用：先定义动画，在调用定义好的动画
2、语法：@keyframes 动画名称 div 调用动画，持续时间
3、动画序列
（1）0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
（2）在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
（3）动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
（4）用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%
4、动画常见属性

5、 动画简写方式
1）/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode
2）知识要点
（1）简写属性里面不包含 animation-paly-state
（2）暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用
（3）要想动画走回来，而不是直接调回来：animation-direction: alternate
（4）盒子动画结束后，停在结束位置：animation-fill-mode: forwards
6、速度曲线细节
1）语法：animation-timing-function: 规定动画的速度曲线，默认是ease
2）
重点单词：
transform: translate:（x，y） 移动
transform: rotate:（0deg） 旋转
transform-origin:x y 设置元素旋转中心点
transform: scale(x, y) 缩放
animation-name 动画名称
animation-duration 周期完成所花时间
animation-timing-function: 规定动画的速度曲线
animation-timing-function:linder规定动画的速度匀速
animation-delay 动画何时开始
animation-iteration-count：infinite 无限循坏播放
animation-direction: alternate:动画逆播放
animation-fill-mode: forwards 动画结束后停在结束位置
animation-paly-state 规定动画是否运行或暂停 paused 暂停
steps（指定时间函数中的间隔数量 步长）
有关品优购首页、注册页、列表页制作及SEO优化、Web服务器等请点击a=href"https://www.cnblogs.com/kk199578/p/13982792.html"