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

标签

评论

this is is footer