How to use CSS to realize meteor shower background
Today, I would like to share with you how to use CSS to achieve meteor shower background related knowledge, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can learn something after reading this article, let's learn about it.
Vue page usage
Style
.space {width: 100%; height: 100vh; background: # 121212;} .room{ width: 150px; height: 150px; border-radius: 50%; background: # 333; position: absolute; left: 50%; top: 50%; margin:-75px 00-75px; overflow: hidden Z-index: 2;} .crash _ shadow {position: absolute; border-radius: 50%; height: 100%; width: 100%; top:-40%; right:-10%; border: 35px solid rgba (0,0,0, .15);} .crater1, .crater2, .crater3, .crater4 {position: absolute Border-radius: 50%; background: rgba (0,0,0, .3); box-shadow: inset 3px 3px 0 rgba (0,0,0,.2);} .crater1 {width: 20px; height: 20px; left: 25%; top: 20%;} .crater2 {width: 10px; height: 10px; left: 50% Top: 60%;} .crater3 {width: 15px; height: 15px; left: 30%; top: 65%;} .crater4 {width: 15px; height: 15px; left: 60%; top: 35%;} .star {display: block; width: 5px; height: 5px Border-radius: 50%; background: # FFF; top: 100px; left: 400px; position: relative; transform-origin: 100%; animation: star-ani 6s infinite ease-out; box-shadow: 00 5px 5px rgba (255,255,255, .3); opacity: 0; z-index: 2 } .star: after {content:'; display: block; top: 0px; left: 4px; border: 0px solid # fff; border-width: 0px 90px 2px 90px; border-color: transparent transparent transparent rgba (255,255,255, .3); transform: rotate (- 45deg) translate3d (1px, 3px, 0) Box-shadow: 00 1px 0 rgba (255,255,255,.1); transform-origin: 0,100%; animation: shooting-ani 3s infinite ease-out;} .top: 30px; left: 395px; background: # ff5a99; animation-delay: 5s;-webkit-animation-delay: 5s;-moz-animation-delay: 5s After {border-color: transparent transparent transparent # ff5a99; animation-delay: 5s;-webkit-animation-delay: 5s;-moz-animation-delay: 5s;} .blue {top: 35px; left: 432px; background: cyan; animation-delay: 7s;-webkit-animation-delay: 7s;-moz-animation-delay: 7s Blue: after {border-color: 'transpareanimation-delay: 12s;-webkit-animation-delay: 7s;-moz-animation-delay: 7s; animation-delay: 7s;} .yellow {top: 50px; left: 600px; background: # ffcd5c; animation-delay: 5.8s } .yellow: after {border-color: transparent transparent transparent # ffcd5c; animation-delay: 5.8s;} @ keyframes star-ani {0 {opacity: 0; transform: scale (0) rotate (0) translate3d (0,0,0);-webkit-transform: scale (0) rotate (0) translate3d (0,0,0) -moz-transform: scale (0) rotate (0) translate3d (0,0,0);} 50% {opacity: 1; transform: scale (1) rotate (0) translate3d (- 200px, 200px, 0);-webkit-transform: scale (1) rotate (0) translate3d (- 200px, 200px, 0) -moz-transform: scale (1) rotate (0) translate3d (- 200px, 200px, 0);} 100% {opacity: 0; transform: scale (1) rotate (0) translate3d (- 300px, 300px, 0);-webkit-transform: scale (1) rotate (0) translate3d (- 300px, 300px, 0) -moz-transform: scale (1) rotate (0) translate3d (- 300px, 300px, 0);}} above is all the content of the article "how to use CSS to achieve a meteor shower background". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
