SOURCE

<div class="lucky-modal">
</div>
 <div class="aniPic">
    <img class="Rotation" src="http://chuangshicdn.mpres.51vv.com/image/5c04f4b70712960a3cc624e9f168f2ee.png" width="500" height="500"/>
</div>
 <div class="aniPic2">
    <img class="Rotation" src="http://chuangshicdn.mpres.51vv.com/image/3acab49b9338cebcee06c77e0c6adbbc.png" width="500" height="500"/>
</div>
<div class="aniPic3">
    <img src="http://chuangshicdn.mpres.51vv.com/image/19faeb72e1b775f1cfb3c28d6d9ee46f.png" width="40" height="40"/>
</div>
<div class="aniPic3-1">
    <img src="http://chuangshicdn.mpres.51vv.com/image/19faeb72e1b775f1cfb3c28d6d9ee46f.png" width="40" height="40"/>
</div>
<div class="aniPic3-2">
    <img src="http://chuangshicdn.mpres.51vv.com/image/19faeb72e1b775f1cfb3c28d6d9ee46f.png" width="40" height="40"/>
</div>
<div class="aniPic3-3">
    <img src="http://chuangshicdn.mpres.51vv.com/image/19faeb72e1b775f1cfb3c28d6d9ee46f.png" width="40" height="40"/>
</div>
<style>
    .lucky-modal{
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 388px;
            height: 388px;
            background: gray;
            background-size: 100% 100%;
            z-index: 100;

    }
    .aniPic {
           width: 388px;
            height: 388px;
            position: fixed;
            top: 30%;
            left:42%;
            transform: translate(-50%, -50%);
    }
    .aniPic2 {
            width: 388px;
            height: 388px;
            position: fixed;
            top: 30%;
            left: 45%;
            transform: translate(-50%, -50%);
    }
    .aniPic3 {
             position: fixed;
            top: 20%;
            left: 55%;
            /*关键帧名称*/
            -webkit-animation-name:scaleDraw;
            /*动画的速度曲线*/
            -webkit-animation-timing-function:ease-in-out;
            /*动画播放的次数*/
            -webkit-animation-iteration-count:infinite;
            /*动画所花费的时间*/
            -webkit-animation-duration:1s;
    }
    .aniPic3-1 {
            position: fixed;
            top: 16%;
            left: 35%;
            /*关键帧名称*/
            -webkit-animation-name:scaleDraw;
            /*动画的速度曲线*/
            -webkit-animation-timing-function:ease-in-out;
            /*动画播放的次数*/
            -webkit-animation-iteration-count:infinite;
            /*动画所花费的时间*/
            -webkit-animation-duration:1s;
    }
    .aniPic3-2 {
            position: fixed;
            top: 46%;
            left: 20%;
            /*关键帧名称*/
            -webkit-animation-name:scaleDraw;
            /*动画的速度曲线*/
            -webkit-animation-timing-function:ease-in-out;
            /*动画播放的次数*/
            -webkit-animation-iteration-count:infinite;
            /*动画所花费的时间*/
            -webkit-animation-duration:1s;
    }
    .aniPic3-3 {
            position: fixed;
            top: 40%;
            right: 20%;
            /*关键帧名称*/
            -webkit-animation-name:scaleDraw;
            /*动画的速度曲线*/
            -webkit-animation-timing-function:ease-in-out;
            /*动画播放的次数*/
            -webkit-animation-iteration-count:infinite;
            /*动画所花费的时间*/
            -webkit-animation-duration:1s;
    }
    /* 动画旋转 */
    @-webkit-keyframes rotation{
        from {-webkit-transform: rotate(0deg);}
        to {-webkit-transform: rotate(360deg);}
    }
    .Rotation{
        -webkit-transform: rotate(360deg);
        animation: rotation 3s linear infinite;
        -moz-animation: rotation 3s linear infinite;
        -webkit-animation: rotation 3s linear infinite;
        -o-animation: rotation 3s linear infinite;
    }
    /* 动画放大缩小 */
    @keyframes scaleDraw {
        /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
        0% {
            transform:scale(1);
            /*开始为原始大小*/
        }
        25% {
            transform:scale(1.4);
            /*放大1.4倍*/
        }
        50% {
            transform:scale(1);
        }
        75% {
            transform:scale(1.4);
        }
    }
</style>