动态动画弹窗样式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;
}