一张 CD 的动画

晴天CD
两个 Div 实现的动画

1
2
<div class="cd"></div>
<div class="music"></div>

为什么要写这个呢?
答案是 玩
没错 就是玩…
可能脑抽吧
其实我发现 CSS 动画真的很好玩!
可以实现一些炫酷的效果
接下来我会继续写几个好玩的 Demo
补充下我并不充实的 CSS3 动画知识…
玩并快乐的学习~
代码请戳下面
http://codepen.io/_kieran/pen/QNRmep
原理很简单
CD 只要用到了 box-shadow 来实现光盘面 文字分别用 before after 伪类
两个音符也是一个 div 上的伪类
CD 加上无限旋转的动画
音符加上 translate rotate 实现慢慢摇摆上升
再用透明度实现渐隐渐现就 OK 了