20200818戚权

知识点

透视距离

• 模拟人的眼睛到3D转换元素之间的距离。距离不同，看到的效果不同
• 属性为perspective，值为px，值越小效果越明显。

转换原定

• transform-origin 取值 1以px为单位的数字，2%，3关键字（x：left ，center，right。y：top，center，bottom）
• 取值个数 2d：两个值，表示原点在x轴上和y轴上的位置

过度

transition属性

• transition-property 检索过设置对象中的参与过度的属性取值为
  1. all 支持所有过度属性，都参与此次过度效果
  2. 支持过度的属性：颜色，多数取值为具体数字的属性，阴影，transform，visibility
• transition-duration 设置和检索对象过度的持续时间（s，ms为单位的数字）
• transition-timing-function 检索或设置对象中过度的动漫类型（过度时间曲线函数）
  1. 关键字 ease，linear，ease-in，ease-out，ease-in-out
  2. 贝塞尔曲线函数 cubic-bezier（0.0.0.0）
• transition-delay 检索或设置对象延迟过度的时间（以s，ms为单位的数字）

动画

1定义动画

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

2使用动画

• 动画名称 animation-name：动画名称
• 动画执行时间 animetion-duration：n s/ms
• 动漫的时间曲线函数 animation-timeing-function：linear
  • linear匀速
  • ease默认，动画以低速开始，然后加快，在结束前变慢
  • ease-in动画以低速开始
  • ease-out动画以低速结束
  • ease-in-out动画以低速开始和结尾
  • cubic-bezier（n,n,n,n)自定义三次贝塞尔函数的值，n=0~1
• 动画开始的延迟时间 animation-delay：n s/ms
• 动画播放次数 animation-iteration-count：infinite
  • 无单位的整数，具体播放次数
  • infinite无限循环播放
• 动画播放顺序 animation-direction：alternate
  • normal正序播放
  • reverse逆序播放
  • alternate正逆轮流播放
• 动漫在播放之前，和播放之后的状态animation-fill-mode：forwards
  • nine默认值 不填充
  • vackwards动画播放的延迟时间内将动画的第一帧填充在元素中
  • forwards动画播放的时间后将动画的最后一帧填充在元素中
  • both同时设置backwards和forwards
• 鼠标悬停，动画暂停 animation-play-state
  • pause暂停
  • running播放
• 简约动画
  • animation：name duration timing-function delay count direction
  • animation:name duration