css实现流星动画效果代码
代码语言:html
所属分类:粒子
代码描述:css实现流星动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); height: 100vh; overflow: hidden; font-family: 'Anton', sans-serif; justify-content: center; align-items: center; } .night { position: relative; width: 100%; height: 100%; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); -webkit-animation: sky 200000ms linear infinite; animation: sky 200000ms linear infinite; } .shooting_star { position: absolute; left: 50%; top: 50%; height: 2px; background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0)); border-radius: 999px; -webkit-filter: drop-shadow(0 0 6px #699bff); filter: drop-shadow(0 0 6px #699bff); -webkit-animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite; animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite; } .shooting_star::before, .shooting_star::after { content: ''; position: absolute; top: calc(50% - 1px); right: 0; height: 2px; background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0)); -webkit-transform: translateX(50%) rotateZ(45deg); transform: translateX(50%) rotateZ(45deg); border-radius: 100%; -webkit-animation: shining 3000ms ease-in-out infinite; animation: shining 3000ms ease-in-out infinite; } .shooting_star::after { -webkit-transform: translateX(50%) rotateZ(-45deg); transform: translateX(50%) rotateZ(-45deg); } .shooting_star:nth-child(1) { top: calc(50% - 185px); left: calc(50% - 150px); -webkit-animation-delay: 8971ms; animation-delay: 8971ms; } .shooting_star:nth-child(1)::before, .shooting_star:nth-child(1)::after, .shooting_star:nth-child(1)::after { -webkit-animation-delay: 8971ms; animation-delay: 8971ms; } .shooting_star:nth-child(2) { top: calc(50% - 50px); left: calc(50% - 179px); -webkit-animation-delay: 9256ms; animation-delay: 9256ms; } .shooting_star:nth-child(2)::before, .shooting_star:nth-child(2)::after, .shooting_star:nth-child(2)::after { -webkit-animation-delay: 9256ms; animation-delay: 9256ms; } .shooting_star:nth-child(3) { top: calc(50% - -146px); left: calc(50% - 135px); -webkit-animation-delay: 8700ms; animation-delay: 8700ms; } .shooting_star:nth-child(3)::before, .shooting_star:nth-child(3)::after, .shooting_star:nth-child(3)::after { -webkit-animation-delay: 8700ms; animation-delay: 8700ms; } .shooting_star:nth-child(4) { top: calc(50% - -77px); left: calc(50% - 157px); -webkit-animation-delay: 3147ms; animation-delay: 3147ms; } .shooting_star:nth-child(4)::before, .shooting_star:nth-child(4)::after, .shooting_star:nth-child(4)::after { -webkit-animation-delay: 3147ms; animation-delay: 3147ms; } .shooting_star:nth-child(5) { top: calc(50% - -183px); left: calc(50% - 8px); -webkit-animation-delay: 6588ms; animation-delay: 6588ms; } .shooting_star:nth-child(5)::before, .shooting_star:nth-child(5)::after, .shooting_star:nth-child(5)::after { -webkit-animation-delay: 6588ms; animation-delay: 6588ms; } .shooting_star:nth-child(6) { top: calc(50% - -29px); left: calc(50% - 195px); -webkit-animation-delay: 8009ms; animation-delay: 8009ms; } .shooting_star:nth-child(6)::before, .shooting_star:nth-child(6)::after, .shooting_star:nth-child(6)::after { -webkit-animation-delay: 8009ms; animation-delay: 8009ms; } .shooting_star:nth-child(7) { top: calc(50% - 95px); left: calc(50% - 69px); -webkit-animation-delay: 5420ms; animation-delay: 5420ms; } .shooting_star:nth-child(7)::before, .shooting_star:nth-child(7)::after, .shooting_star:nth-child(7)::after { -webkit-animation-delay: 5420ms; animation-delay: 5420ms; } .shooting_star:nth-child(8) { top: calc(50% - -59px); left: calc(50% - 70px); -webkit-animation-delay: 9378ms; animation-delay: 9378ms; } .shooting_star:nth-child(8)::before, .shooting_star:nth-child(8)::after, .shooting_star:nth-child(8)::after { -webkit-animation-delay: 9378ms; animation-delay: 9378ms; } .shooting_star:nth-child(9) { top: calc(50% - 76px); left: calc(50% - 238px); -webkit-animation-delay: 2845ms; animation-delay: 2845ms; } .shooting_star:nth-child(9)::before, .shooting_star:nth-child(9)::after, .shooting_star:nth-child(9)::after { -webkit-animation-delay: 2845ms; animation-delay: 2845ms; } .shooting_star:nth-child(10) { top: calc(50% - 83px); left: calc(50% - 6px); -webkit-animation-delay: 5205ms; animation-delay: 5205ms; } .shooting_star:nth-child(10)::before, .shooting_star:nth-child(10)::after, .shooting_star:nth-child(10)::after { -webkit-animation-delay: 5205ms; animation-delay: 5205ms; } .shooting_star:nth-child(11) { top: calc(50% - -137px); left: calc(50% - 267px); -webkit-animation-delay: 808ms; animation-delay: 808ms; } .shooting_star:nth-child(11)::before, .shooting_star:nth-child(11)::after, .shooting_star:nth-child(11)::after { -webkit-animation-delay: 808ms; animation-delay: 808ms; } .shooting_star:nth-child(12) { top: calc(50% - 12px); left: calc(50% - 8px); -webkit-animation-delay: 2406ms; animation-de.........完整代码请登录后点击上方下载按钮下载查看
网友评论0