CSS3制作扑克牌形式的loading加载动画

今天偶然看见一篇关于css3的loading加载动画的文章，刚学完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转动相关角度制作简单动画。部分代码如下：

.puke-wrapper{
    position: relative;
    top: 35%;
    left: 40%;
    width: 100px;
    height: 150px;
}
.puke-wrapper div{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 20px;
    font-weight: 400;
    background-color: #fff;
    border-radius: 12px;
    transform-origin: left bottom;
    border: 2px solid #000000;
}
/*以下代码只显示部分，其余同理。*/
@keyframes puke-o {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(10deg);
    }
}
@keyframes puke-a {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(20deg);
    }
}
.puke-wrapper div:nth-child(2){
    animation: puke-o 2s infinite;
}
.puke-wrapper div:nth-child(3){
    animation: puke-a 2s infinite;
}

最后，再适当地加上阴影效果和花色符号就得到了最终的效果。欢迎同行交流，欢迎大神指正，源代码如下：链接：https://pan.baidu.com/s/14IG1zklSI7ghhInvEdlnuw 提取码：itfs

CSS3制作扑克牌形式的loading加载动画

相关推荐