动画

Animation

• @keyframes定义
• animation: 使用

@keyframes mykf
{
    from { background: red; }
    to {background: yellow; }
}
div
{
    animation: mykf 5s infinite;
}

属性

The animation shorthand property applies an animation between styles.

• animation-name 时间曲线
• animation-duration 动画时长
• animation-timing-function 动画的时间曲线
• animation-delay 时间开始前的延迟
• animation-iteration-count 动画的播放次数
• animation-direction 动画的方向

@keyframes mykf
{
    0% { top: 0; transition:top ease }
    50% { top: 30; transition:top ease-in }
    75% { top: 10; transition:top ease-out }
    100% { top: 0; transition:top linear }
}

Transition

优点是可精细控制每个属性的变换

• transition-property 要变换的属性
• transition-duration 变换的时长
• transition-timing-function 时间曲线
• transition-delay 延迟

Timing fuction

css timing fuction 只有cubic-bezier 是以时间为横轴，被变换属性百分比为纵轴的函数曲线，有起始点、终点和两个控制点。

系统推荐特例曲线有一下几个

• ease 位移类 (最常用 推荐)
• linear
• ease-in 退出型
• ease-out 进入型
• ease-in-out

cubic-bezier曲线可以拟合

渲染与颜色

CMYK与RGB

HSL与HSV

形状

• border
• box-shadow
• border-radius

data uri + svg 搞定一切矢量图 做bg

css作业

body.getComputedStyle

HTML

quot
amp
lt
gt

语义

DOM API

整体分三类 Dom Tree、Events、Range
节点：文本节点 元素节点

导航类操作

• parentNode
• childNodes
• firstChild
• lastChild
• nextSibling
• previousSibling

修改类操作

• appendChild
• insertBefore
• removeChild
• replaceChild

重点

1.所有的dom元素默认只有一个父元素，不能被插入到两个位置，如果需要把某元素从a位置换到b位置，不需要手动将其从a位置摘除，直接插入到b位置即可；
2.childNodes是living的collection，实时根据dom操作而变化；

高级操作

• compareDocumentPosition: 是一个用于比较两个节点中关系的函数
• contains:
• isEqualNode:
• isSameNode:
• cloneNode:复制一个节点，如果传入参数true，则会连同子元素拷贝

事件

• addEventListenner 三个参数type、listener、options