学习记录（六）

2020.3.16-2020.3.22

学到的新知识

• transition 过渡

  • transition-property ： 过渡效果
  • transition-duration ： 过渡所需时间
  • transition-delay ： 正为延迟，负为提前
  • transition-timing-function ：速度效果

• transform变形

  • translate ： 位移
  • scale ：放缩（值为比例）
  • rotate：旋转（单位为deg，正为顺时针旋转，负为逆时针旋转）
  • skew ： 斜切（单位为deg，正为向左倾斜，负为向右倾斜）
  • transform-origin ：基点的位置
    注：只能给块状元素使用，位移会受到其他三项的影响

• animation 动画

  • animation-name : 动画的名字 (自定义的)

  • animation-duration : 动画所需时间

  • animation-delay : 延迟时间

  • animation-iteration-count : 动画重复次数 （默认为1 ，infinite无限次）

  • animation-timing-function : 运动形式

  • animation-fill-mode : 动画播放之前或之后，其动画效果是否可见。

      	none (默认值)   在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
      	backwards       在延迟的情况下，让0%在延迟前生效
      	forwards        在运动结束后，停到结束位置
      	both            backwards和forwards同时生效
    

  • animation-direction : 是否应该轮流反向播放动画。

    alternate           一次正向，一次反向
    reverse             永远都是反向 
    normal (默认值)     永远都是正向 
    

• 伪元素

  • 伪元素本质上是创建了一个有内容的虚拟容器。

       :: selection
       :: first-line  
       :: first-letter
       :: before     
       :: after 
    

    注：当无内容时：content: " "; 即可。