Artificii

<style> body{margin:0;padding:0}.pyro>.after,.pyro>.before{position:absolute;width:5px;height:5px;border-radius:50%;box-shadow:0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff,0 0 #fff;-moz-animation:1s bang ease-out infinite backwards,1s gravity ease-in infinite backwards,5s position linear infinite backwards;-webkit-animation:1s bang ease-out infinite backwards,1s gravity ease-in infinite backwards,5s position linear infinite backwards;-o-animation:1s bang ease-out infinite backwards,1s gravity ease-in infinite backwards,5s position linear infinite backwards;-ms-animation:1s bang ease-out infinite backwards,1s gravity ease-in infinite backwards,5s position linear infinite backwards;animation:1s bang ease-out infinite backwards,1s gravity ease-in infinite backwards,5s position linear infinite backwards}.pyro>.after{-moz-animation-delay:1.25s,1.25s,1.25s;-webkit-animation-delay:1.25s,1.25s,1.25s;-o-animation-delay:1.25s,1.25s,1.25s;-ms-animation-delay:1.25s,1.25s,1.25s;animation-delay:1.25s,1.25s,1.25s;-moz-animation-duration:1.25s,1.25s,6.25s;-webkit-animation-duration:1.25s,1.25s,6.25s;-o-animation-duration:1.25s,1.25s,6.25s;-ms-animation-duration:1.25s,1.25s,6.25s;animation-duration:1.25s,1.25s,6.25s}@-webkit-keyframes bang{to{box-shadow:-95px -186.67px #5f0,63px -399.67px #ff00d5,-122px 60.33px #80ff00,-120px -155.67px #f2ff00,71px -412.67px #2b00ff,-245px -357.67px #5eff00,249px -34.67px #4f0,236px -202.67px #ffe600,124px -19.67px #c4ff00,-66px -67.67px #b0f,175px -200.67px #ff8400,-53px -309.67px #ff008c,102px -61.67px #5eff00,-84px -323.67px #ff3700,-203px -253.67px #00ff9d,-131px 18.33px #2600ff,2px -6.67px #00ff26,-52px -153.67px #00ff15,195px -408.67px #00a6ff,121px -161.67px #ff0009,-75px -9.67px #001eff,-83px -371.67px #ff0040,29px -96.67px #00ff62,46px -55.67px #00ffd5,-82px 49.33px #26ff00,-135px -409.67px #ff00ae,-195px -208.67px #f80,44px -256.67px #6f0,158px -42.67px #ff0015,164px -378.67px #2fff00,-163px -227.67px #20f,152px -74.67px #95ff00,-1px -301.67px #00a2ff,0 -111.67px #ff00e6,137px 62.33px #0091ff,-35px -313.67px #ff0062,-201px -63.67px #00ff48,-58px -399.67px #ae00ff,-112px -366.67px #1f0,205px -156.67px #00ff6a,239px -334.67px #0051ff,47px -61.67px #8cff00,108px 45.33px #e0f,92px -169.67px #51ff00,123px -207.67px #ffe100,205px -43.67px #ff1e00,-144px 36.33px #f06,-86px -249.67px #0dff00,-20px 75.33px #0026ff,31px -22.67px #ff00ae,58px 72.33px #09f}}@-moz-keyframes bang{to{box-shadow:-95px -186.67px #5f0,63px -399.67px #ff00d5,-122px 60.33px #80ff00,-120px -155.67px #f2ff00,71px -412.67px #2b00ff,-245px -357.67px #5eff00,249px -34.67px #4f0,236px -202.67px #ffe600,124px -19.67px #c4ff00,-66px -67.67px #b0f,175px -200.67px #ff8400,-53px -309.67px #ff008c,102px -61.67px #5eff00,-84px -323.67px #ff3700,-203px -253.67px #00ff9d,-131px 18.33px #2600ff,2px -6.67px #00ff26,-52px -153.67px #00ff15,195px -408.67px #00a6ff,121px -161.67px #ff0009,-75px -9.67px #001eff,-83px -371.67px #ff0040,29px -96.67px #00ff62,46px -55.67px #00ffd5,-82px 49.33px #26ff00,-135px -409.67px #ff00ae,-195px -208.67px #f80,44px -256.67px #6f0,158px -42.67px #ff0015,164px -378.67px #2fff00,-163px -227.67px #20f,152px -74.67px #95ff00,-1px -301.67px #00a2ff,0 -111.67px #ff00e6,137px 62.33px #0091ff,-35px -313.67px #ff0062,-201px -63.67px #00ff48,-58px -399.67px #ae00ff,-112px -366.67px #1f0,205px -156.67px #00ff6a,239px -334.67px #0051ff,47px -61.67px #8cff00,108px 45.33px #e0f,92px -169.67px #51ff00,123px -207.67px #ffe100,205px -43.67px #ff1e00,-144px 36.33px #f06,-86px -249.67px #0dff00,-20px 75.33px #0026ff,31px -22.67px #ff00ae,58px 72.33px #09f}}@-o-keyframes bang{to{box-shadow:-95px -186.67px #5f0,63px -399.67px #ff00d5,-122px 60.33px #80ff00,-120px -155.67px #f2ff00,71px -412.67px #2b00ff,-245px -357.67px #5eff00,249px -34.67px #4f0,236px -202.67px #ffe600,124px -19.67px #c4ff00,-66px -67.67px #b0f,175px -200.67px #ff8400,-53px -309.67px #ff008c,102px -61.67px #5eff00,-84px -323.67px #ff3700,-203px -253.67px #00ff9d,-131px 18.33px #2600ff,2px -6.67px #00ff26,-52px -153.67px #00ff15,195px -408.67px #00a6ff,121px -161.67px #ff0009,-75px -9.67px #001eff,-83px -371.67px #ff0040,29px -96.67px #00ff62,46px -55.67px #00ffd5,-82px 49.33px #26ff00,-135px -409.67px #ff00ae,-195px -208.67px #f80,44px -256.67px #6f0,158px -42.67px #ff0015,164px -378.67px #2fff00,-163px -227.67px #20f,152px -74.67px #95ff00,-1px -301.67px #00a2ff,0 -111.67px #ff00e6,137px 62.33px #0091ff,-35px -313.67px #ff0062,-201px -63.67px #00ff48,-58px -399.67px #ae00ff,-112px -366.67px #1f0,205px -156.67px #00ff6a,239px -334.67px #0051ff,47px -61.67px #8cff00,108px 45.33px #e0f,92px -169.67px #51ff00,123px -207.67px #ffe100,205px -43.67px #ff1e00,-144px 36.33px #f06,-86px -249.67px #0dff00,-20px 75.33px #0026ff,31px -22.67px #ff00ae,58px 72.33px #09f}}@-ms-keyframes bang{to{box-shadow:-95px -186.67px #5f0,63px -399.67px #ff00d5,-122px 60.33px #80ff00,-120px -155.67px #f2ff00,71px -412.67px #2b00ff,-245px -357.67px #5eff00,249px -34.67px #4f0,236px -202.67px #ffe600,124px -19.67px #c4ff00,-66px -67.67px #b0f,175px -200.67px #ff8400,-53px -309.67px #ff008c,102px -61.67px #5eff00,-84px -323.67px #ff3700,-203px -253.67px #00ff9d,-131px 18.33px #2600ff,2px -6.67px #00ff26,-52px -153.67px #00ff15,195px -408.67px #00a6ff,121px -161.67px #ff0009,-75px -9.67px #001eff,-83px -371.67px #ff0040,29px -96.67px #00ff62,46px -55.67px #00ffd5,-82px 49.33px #26ff00,-135px -409.67px #ff00ae,-195px -208.67px #f80,44px -256.67px #6f0,158px -42.67px #ff0015,164px -378.67px #2fff00,-163px -227.67px #20f,152px -74.67px #95ff00,-1px -301.67px #00a2ff,0 -111.67px #ff00e6,137px 62.33px #0091ff,-35px -313.67px #ff0062,-201px -63.67px #00ff48,-58px -399.67px #ae00ff,-112px -366.67px #1f0,205px -156.67px #00ff6a,239px -334.67px #0051ff,47px -61.67px #8cff00,108px 45.33px #e0f,92px -169.67px #51ff00,123px -207.67px #ffe100,205px -43.67px #ff1e00,-144px 36.33px #f06,-86px -249.67px #0dff00,-20px 75.33px #0026ff,31px -22.67px #ff00ae,58px 72.33px #09f}}@keyframes bang{to{box-shadow:-95px -186.67px #5f0,63px -399.67px #ff00d5,-122px 60.33px #80ff00,-120px -155.67px #f2ff00,71px -412.67px #2b00ff,-245px -357.67px #5eff00,249px -34.67px #4f0,236px -202.67px #ffe600,124px -19.67px #c4ff00,-66px -67.67px #b0f,175px -200.67px #ff8400,-53px -309.67px #ff008c,102px -61.67px #5eff00,-84px -323.67px #ff3700,-203px -253.67px #00ff9d,-131px 18.33px #2600ff,2px -6.67px #00ff26,-52px -153.67px #00ff15,195px -408.67px #00a6ff,121px -161.67px #ff0009,-75px -9.67px #001eff,-83px -371.67px #ff0040,29px -96.67px #00ff62,46px -55.67px #00ffd5,-82px 49.33px #26ff00,-135px -409.67px #ff00ae,-195px -208.67px #f80,44px -256.67px #6f0,158px -42.67px #ff0015,164px -378.67px #2fff00,-163px -227.67px #20f,152px -74.67px #95ff00,-1px -301.67px #00a2ff,0 -111.67px #ff00e6,137px 62.33px #0091ff,-35px -313.67px #ff0062,-201px -63.67px #00ff48,-58px -399.67px #ae00ff,-112px -366.67px #1f0,205px -156.67px #00ff6a,239px -334.67px #0051ff,47px -61.67px #8cff00,108px 45.33px #e0f,92px -169.67px #51ff00,123px -207.67px #ffe100,205px -43.67px #ff1e00,-144px 36.33px #f06,-86px -249.67px #0dff00,-20px 75.33px #0026ff,31px -22.67px #ff00ae,58px 72.33px #09f}}@-webkit-keyframes gravity{to{transform:translateY(200px);-moz-transform:translateY(200px);-webkit-transform:translateY(200px);-o-transform:translateY(200px);-ms-transform:translateY(200px);opacity:0}}@-moz-keyframes gravity{to{transform:translateY(200px);-moz-transform:translateY(200px);-webkit-transform:translateY(200px);-o-transform:translateY(200px);-ms-transform:translateY(200px);opacity:0}}@-o-keyframes gravity{to{transform:translateY(200px);-moz-transform:translateY(200px);-webkit-transform:translateY(200px);-o-transform:translateY(200px);-ms-transform:translateY(200px);opacity:0}}@-ms-keyframes gravity{to{transform:translateY(200px);-moz-transform:translateY(200px);-webkit-transform:translateY(200px);-o-transform:translateY(200px);-ms-transform:translateY(200px);opacity:0}}@keyframes gravity{to{transform:translateY(200px);-moz-transform:translateY(200px);-webkit-transform:translateY(200px);-o-transform:translateY(200px);-ms-transform:translateY(200px);opacity:0}}@-webkit-keyframes position{0%,19.9%{margin-top:10%;margin-left:40%}20%,39.9%{margin-top:40%;margin-left:30%}40%,59.9%{margin-top:20%;margin-left:70%}60%,79.9%{margin-top:30%;margin-left:20%}80%,99.9%{margin-top:30%;margin-left:80%}}@-moz-keyframes position{0%,19.9%{margin-top:10%;margin-left:40%}20%,39.9%{margin-top:40%;margin-left:30%}40%,59.9%{margin-top:20%;margin-left:70%}60%,79.9%{margin-top:30%;margin-left:20%}80%,99.9%{margin-top:30%;margin-left:80%}}@-o-keyframes position{0%,19.9%{margin-top:10%;margin-left:40%}20%,39.9%{margin-top:40%;margin-left:30%}40%,59.9%{margin-top:20%;margin-left:70%}60%,79.9%{margin-top:30%;margin-left:20%}80%,99.9%{margin-top:30%;margin-left:80%}}@-ms-keyframes position{0%,19.9%{margin-top:10%;margin-left:40%}20%,39.9%{margin-top:40%;margin-left:30%}40%,59.9%{margin-top:20%;margin-left:70%}60%,79.9%{margin-top:30%;margin-left:20%}80%,99.9%{margin-top:30%;margin-left:80%}}@keyframes position{0%,19.9%{margin-top:10%;margin-left:40%}20%,39.9%{margin-top:40%;margin-left:30%}40%,59.9%{margin-top:20%;margin-left:70%}60%,79.9%{margin-top:30%;margin-left:20%}80%,99.9%{margin-top:30%;margin-left:80%}}.pyro{position:fixed;top:0;left:0;width:100%;height:100%} </style> <div class="pyro"> <div class="before"></div> <div class="after"></div> </div>