2017.02.06

- 計(jì)劃

• 月計(jì)劃
• 剖析仿qqMusic小程序在音樂(lè)播放的控制

- 實(shí)際完成

• 小程序音頻用audio組件的實(shí)現(xiàn)總結(jié)
• 剖析仿qqMusic小程序在音樂(lè)播放的控制
• 十三水代理后臺(tái)的頁(yè)面樣式更改

- 總結(jié)

• qqMusic小程序音樂(lè)播放剖析，用音頻控制的API實(shí)現(xiàn)。

- `animation: rotate 10s linear infinite;` 
    - [`animation`](http://www.w3school.com.cn/cssref/pr_animation.asp) 一定要用 `@keyframes` 定義的動(dòng)畫(huà)。
    - `animation-iteration-count: n|infinite; `動(dòng)畫(huà)次數(shù)無(wú)限,`infinite`為無(wú)限循環(huán)
- 旋轉(zhuǎn)控制用 [animation-play-state](http://www.w3school.com.cn/cssref/pr_animation-play-state.asp) 屬性控制運(yùn)行/停止。
- 進(jìn)度條用`position:absolute` + `transform: translateX(100%)`進(jìn)行進(jìn)度移動(dòng)

.progress .time-bar .time-play {
    position:absolute;
    left:-16%;
    width:100%;
    height:100%;
    background:#31c27c;
    transition:all 1s linear;
}

    - 另：保留最后一幀[ animation-fill-mode](http://www.w3school.com.cn/cssref/pr_animation-fill-mode.asp)