动态动画弹窗样式css

点击下载图片素材
html

<div class="popWin">
</div>
<div class="popPic">
    <div class="popWinBtn01">查看证书</div>
    <div class="wintips01">恭喜您已完成训练营学习任务，荣誉证书已发放，快去看看吧。</div>
    <img class="close01" src="../img/star/close01.png" alt="" />
    <img class="popimg5" src="../img/star/pop05.png" alt="" />
    <img class="popimg4" src="../img/star/pop04.png" alt="" />
    <img class="popimg1" src="../img/star/pop01.png" alt="" />
    <img class="popimg2" src="../img/star/pop02.png" alt="" />
    <img class="popimg98" src="../img/star/popwin02.png" alt="" />
    <img class="popimg3" src="../img/star/pop03.png" alt="" />
    <img class="popimg99" src="../img/star/popwin01.png" alt="" />
</div>

css

.popWin{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
    z-index: 999;
}
.popPic{
    position: fixed;
    top: 55%;
    left: 50%;
    transform: translate(-50%,-50%);

    z-index: 9999;
    width: 75.467vw;
    height: 76.267vw;
}
.popPic .popimg99{
    width: 100%;
    height: 100%;
}
.popimg98{
    position: absolute;
    top: -9%;
    left: 15%;
    transform: translate(6%,-15%);
    width: 49.333vw;
    height: 46.133vw;
}
.popimg1{
    position: absolute;
    top: -33%;
    left: 16%;
    transform: translate(6%,-15%);
    width: 52.533vw;
    height: 32.267vw;
    animation: popimg1 1.5s infinite;
}
@keyframes popimg1 {
    0% {
    opacity: 1;
    transform: scale(1);
    }
    100% {
    opacity: 0;
    transform: scale(1);
    }
}

.popimg2{
    position: absolute;
    /* top: -16%;
    left: 15%; */
    top: -28%;
    left: 10%;
    /* transform: translate(-2%,-15%); */
    width: 57.867vw;
    height: 57.333vw;
    -webkit-transform: rotate(360deg);    
    animation: popimg2 5s linear infinite;    
    -moz-animation: popimg2 5s linear infinite;    
    -webkit-animation: popimg2 5s linear infinite;    
    -o-animation: popimg2 5s linear infinite;
}
@-webkit-keyframes popimg2{    
    from {
        -webkit-transform: rotate(0deg);
    }    
    to {
        -webkit-transform: rotate(360deg);
    }
}


.popimg3{
    position: absolute;
    top: 6%;
    left: 71%;
    /* transform: translate(-2%,-15%); */
    width: 6.933vw;
    height: 6.933vw;
    /* animation: popimg3 2s ease-in-out infinite; */
    animation: popimg3 2s infinite;
}
/* @keyframes popimg3 {
    0% {
    transform: rotate(0deg);
    }
    50% {
    transform:rotate(10deg);
    }
    100% {
    transform: rotate(0deg);
    }
} */
@keyframes popimg3 {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(360deg);
    }
}

.popimg4{
    position: absolute;
    top: 15%;
    left: -8%;
    transform: translate(-2%,-15%);
    width: 24.267vw;
    height: 26.667vw;
    /* animation: popimg4 2s infinite;
    -webkit-animation: popimg4 2s infinite; */
    animation: popimg4 1.5s ease-in-out infinite;
}
/* @keyframes popimg4 {
    25% {
        top: 9.333vw;
    }
    100%{
        top: 13.333vw;
    }
} */
@keyframes popimg4 {
    0% {
    transform: rotate(0deg);
    }
    50% {
    transform:rotate(15deg);
    }
    100% {
    transform: rotate(0deg);
    }
}

.popimg5{
    position: absolute;
    top: 39%;
    left: 83%;
    transform: translate(-2%,-15%);
    width: 18.133vw;
    height: 18.133vw;
    /* animation: popimg5 3s infinite;
    -webkit-animation: popimg5 3s infinite; */
    animation: popimg5 1.5s ease-in-out infinite;
}
/* @keyframes popimg5 {
    25% {
        top: 25.333vw;
    }
    100%{
        top: 26.667vw;
    }
} */
@keyframes popimg5 {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform:rotate(15deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.close01{
    position: absolute;
    top: -21%;
    left: 93%;
    transform: translate(-2%,-15%);
    width: 5.333vw;
    height: 5.333vw;
}
.wintips01{
    position: absolute;
    top: 39%;
    left: 17%;
    transform: translate(-2%,-15%);
    width: 53.867vw;
    height: 15.467vw;
    font-size: 3.733vw;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #F45F38;
    line-height: 7.733vw;
}
.popWinBtn01{
    /* display: none; */
    position: absolute;
    top: 74.5%;
    left: 16%;
    transform: translate(-2%,-15%);
    width: 53.333vw;
    height: 13.333vw;
    /* background: #f0f;
    opacity: 0.4; */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5.067vw;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 5.867vw;
    padding-bottom: 1.6vw;
    box-sizing: border-box;
}