2020-06-06

CSS-动画与绘制

写在前面

  • CSS 动画与绘制
  • 3个小时的舞跳下来，这周竟然还不累？好吧，其实是我中间划水了 🙃
  • 以后周六早课，一定要在8点前享受完早餐！今早跳舞低血糖，双耳一直耳鸣

动画与绘制

Animation

  • @keyframes 定义

  • animation: 使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    @keyframes mykf {
      from {background: red;}
      to {background: yellow;}
    }

    div {
      width: 100px;
      height: 100px;
      animation: mykf 5s infinite;
    }

Animation Shortcut

  • animation-name: 时间曲线
  • animation-duration: 动画时长
  • animation-timing-function: 动画的时间曲线
  • animation-delay: 动画开始前的延迟
  • animation-iteration-count: 动画的播放次数
    • <single-animation-iteration-count> = infinite | <number>
  • animation-direction: 动画方向
    • <single-animation-direction> = normal | reverse | alternate | alternate-reverse
1
2
3
4
5
6
7
8
9
/* @keyframes duration | timing-function | delay | 
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
	
/* @keyframes name | duration | timing-function | delay */
animation: 3s linear 1s slidein;
	
/* @keyframes name | duration */
animation: slidein 3s;

贝瑟尔曲线拟合

Transition

Transition Shortcut

  • transition-property: 要变换的属性
  • transition-duration: 变换的时长
  • transition-timing-function: 时间曲线
  • transition-delay: 延迟
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Global values */
transition: inherit;
transition: initial;
transition: unset;

渲染与颜色

颜色

CMYK 与 RGB

HSL 与 HSV

  • Hue 色相(360度) Saturaiotn 饱和度、纯度 Lightness 明度
    • 补色，对角色 –> Hue + 180
  • Hue Saturation Value

形状

  • border
  • box-shadow
  • border-radius

data uri + svg

  • encodeUriComponent
1
data:image/svg+xml,%3csvg%20width=%22100%25%22%20height=%22100%25%22%20version=%221.1%22%20xmlns=%22http://www.w3.org/2000/svg%22%3e%3cellipse%20cx=%22300%22%20cy=%22150%22%20rx=%22200%22%20ry=%2280%22%20style=%22fill:rgb(200,100,50);%20stroke:rgb(0,0,100);stroke-width:2%22/%3e%20%3c/svg%3e

将 ComputedStyle 分类

写在后面

  • 祝大家多多发财
EllePeng

EllePeng

stay awesome.