项目的 Demo 在 http://juy.fm 。
相比起结构设计和逻辑设计,写样式并没有什么值得介绍的技术,加上我的审美也还停留在程序员这个层次上,目前想把样式做好实在是有点「有心无力」的感觉,只能尽量遵循最最基础的设计最佳实践,同时辅以一个 UI 框架降低门槛(我选用的是 Semantic-UI)。
样式编写中用到的几个技巧多是现在颇为常见的:
- 利用 position: absolute 做垂直居中,top 设为 50%,margin-top 设为 - height / 2;
- 鼠标 hover 到「关闭」按钮上有放大动画,利用了 CSS3 的 transition 和 transform 属性;
- 本来还想利用 jQuery.animate() 实现两个简单的动画效果,后来想想,意义不大,还是注释掉了。
明天就要引入 turn.js 的部分了,后续会越来越精彩!
Github 地址:完成辅助页面的样式