2017.02.06
- 计划
- 月计划
- 剖析仿qqMusic小程序在音乐播放的控制
- 实际完成
- 小程序音频用audio组件的实现总结
- 剖析仿qqMusic小程序在音乐播放的控制
- 十三水代理后台的页面样式更改
- 总结
- qqMusic小程序音乐播放剖析,用音频控制的API实现。
- `animation: rotate 10s linear infinite;`
- [`animation`](http://www.w3school.com.cn/cssref/pr_animation.asp) 一定要用 `@keyframes` 定义的动画。
- `animation-iteration-count: n|infinite; `动画次数无限,`infinite`为无限循环
- 旋转控制用 [animation-play-state](http://www.w3school.com.cn/cssref/pr_animation-play-state.asp) 属性控制运行/停止。
- 进度条用`position:absolute` + `transform: translateX(100%)`进行进度移动
.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)