html结构:
<div class="d-shootingStar"><div class="d-stars"></div><div class="d-stars"></div><div class="d-stars"></div><div class="d-stars"></div></div>
Css3:
.d-shootingStar{.pos(a);.whlt(94.1333vw,51.2vw,20vw,9vw);.transform(rotate(-12deg));.d-stars{opacity: 0;.pos(a);left: 50%;top: 50%;.wh(11vw,9vw);-webkit-animation: tail 2s ease-in-out infinite, shooting 2s ease-in-out infinite;animation: tail 2s ease-in-out infinite,shooting 2s ease-in-out infinite;background: url(anverSaryFLiuXings.png) no-repeat;background-size: 100% 100%;&:nth-child(1){top:-7%;left:5%;.wh(10vw,9vw);-webkit-animation-delay: 500ms;animation-delay: 500ms;}&:nth-child(2){.wh(11vw,9vw);top: 44%;left: 6%;.wh(11vw,9vw);-webkit-animation-delay: 0ms;animation-delay: 0ms;}&:nth-child(3){.wh(11vw,9vw);top: 5%;left: 80%;-webkit-transform: scale(0.8);transform: scale(0.8);-webkit-animation-delay: 870ms;animation-delay: 870ms;}&:nth-child(4){.wh(11vw,9vw);top: 35%;left: 90%;-webkit-transform: scale(0.6);transform: scale(0.6);-webkit-animation-delay: 300ms;animation-delay: 300ms;}}}