CSS3制作扑克牌展开动画

         今天偶然看见一篇关于css3的加载动画的文章，刚学完css3部分知识的我就迫不及待地想大练一手，强化自己的学习成果。做的不是很好，仅供学习讨论，欢迎大神指教。最终的效果如下，看着比较简约，截图没截好，见谅。

首先，先写好骨架，也就是html代码，一个div包裹7个div，分别存放loading的各个字母。部分代码如下：

<div class="puke-wrapper">
    <div>L</div>
    <div>O</div>
    <div>A</div>
    <div>D</div>
    <div>I</div>
    <div>N</div>
    <div>G</div>
</div>

然后，在css中配置样式，主要通过transform和animation转动相关角度制作简单动画。部分代码如下：