css布局实现一个流星雨效果
代码语言:html
所属分类:动画
代码描述:css布局实现一个流星雨效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/aqua.min.css"> <style> body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: radial-gradient(ellipse at bottom, #0d1d31 0%, #0c0d13 100%); overflow: hidden; } .stars { position: fixed; top: 0; left: 0; width: 100%; height: 120%; transform: rotate(-45deg); } .star { --star-color: var(--primary-color); --star-tail-length: 6em; --star-tail-height: 2px; --star-width: calc(var(--star-tail-length) / 6); --fall-duration: 9s; --tail-fade-duration: var(--fall-duration); position: absolute; top: var(--top-offset); left: 0; width: var(--star-tail-length); height: var(--star-tail-height); color: var(--star-color); background: linear-gradient(45deg, currentColor, transparent); border-radius: 50%; filter: drop-shadow(0 0 6px currentColor); transform: translate3d(104em, 0, 0); animation: fall var(--fall-duration) var(--fall-delay) linear infinite, tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite; } @media screen and (max-width: 750px) { .star { animation: fall var(--fall-duration) var(--fall-delay) linear infinite; } } .star:nth-child(1) { --star-tail-length: 6.57em; --top-offset: 91.39vh; --fall-duration: 9.677s; --fall-delay: 6.465s; } .star:nth-child(2) { --star-tail-length: 6.31em; --top-offset: 33.87vh; --fall-duration: 8.642s; --fall-delay: 9.687s; } .star:nth-child(3) { --star-tail-length: 7.06em; --top-offset: 47.86vh; --fall-duration: 8.147s; --fall-delay: 8.012s; } .star:nth-child(4) { --star-tail-length: 7.16em; --top-offset: 64.73vh; --fall-duration: 6.331s; --fall-delay: 7.461s; } .star:nth-child(5) { --star-tail-length: 6.52em; --top-offset: 78.18vh; --fall-duration: 11.096s; --fall-delay: 8.166s; } .star:nth-child(6) { --star-tail-length: 7.25em; --top-offset: 66.95vh; --fall-duration: 8.847s; --fall-delay: 5.281s; } .star:nth-child(7) { --star-tail-length: 5.79em; --top-offset: 72.98vh; --fall-duration: 10.869s; --fall-delay: 9.619s; } .star:nth-child(8) { --star-tail-length: 6.57em; --top-offset: 35.07vh; --fall-duration: 6.04s; --fall-delay: 3.624s; } .star:nth-child(9) { --star-tail-length: 6.39em; --top-offset: 72.16vh; --fall-duration: 11.793s; --fall-delay: 2.323s; } .star:nth-child(10) { --star-tail-length: 5.71em; --top-offset: 50.23vh; --fall-duration: 8.85s; --fall-delay: 4.675s; } .star:nth-child(11) { --star-tail-length: 5.97em; --top-offset: 27.38vh; --fall-duration: 9.525s; --fall-delay: 9.329s; } .star:nth-child(12) { --star-tail-length: 7em; --top-offset: 69.03vh; --fall-duration: 7.183s; --fall-delay: 3.555s; } .star:nth-child(13) { --star-tail-length: 6.94em; --top-offset: 23vh; --fall-duration: 10.334s; --fall-delay: 1.805s; } .star:nth-child(14) { --star-tail-length: 5.99em; --top-offset: 47.99vh; --fall-duration: 11.602s; --fall-delay: 9.084s; } .star:nth-child(15) { --star-tail-length: 5.8em; --top-offset: 56.43vh; --fall-duration: 10.869s; --fall-delay: 6.564s; } .star:nth-child(16) { --star-tail-length: 6.8em; --top-offset: 11.48vh; --fall-duration: 6.596s; --fall-delay: 0.847s; } .star:nth-child(17) { --star-tail-length: 6.69em; --top-offset: 65.98vh; --fall-duration: 7.55s; --fall-delay: 2.412s; } .star:nth-child(18) { --star-tail-length: 5.27em; --top-offset: 74.82vh; --fall-duration: 8.079s; --fall-delay: 4.534s; } .star:nth-child(19) { --star-tail-length: 5.24em; --top-offset: 11.53vh; --fall-duration: 11.609s; --fall-delay: 6.336s; } .star:nth-child(20) { --star-tail-length: 5.14em; --top-offset: 74.68vh; --fall-duration: 10.223s; --fall-delay: 4.594s; } .star:nth-child(21) { --star-tail-length: 7.21em; --top-offset: 65.65vh; --fall-duration: 9.825s; --fall-delay: 3.974s; } .star:nth-child(22) { --star-tail-length: 7.3em; --top-offset: 44.17vh; --fall-duration: 10.815s; --fall-delay: 6.251s; } .star:nth-child(23) { --star-tail-length: 7.41em; --top-offset: 46.63vh; --fall-duration: 10.899s; --fall-delay: 3.641s; } .star:nth-child(24) { --star-tail-length: 6.41em; --top-offset: 20.11vh; --fall-duration: 10.4s; --fall-delay: 7.401s; } .star:nth-child(25) { --star-tail-length: 6.89em; --top-offset: 7.84vh; --fall-duration: 11.631s; --fall-delay: 3.674s; } .star:nth-child(26) { --star-tail-length: 7.18em; --top-offset: 30.93vh; --fall-duration: 6.38s; --fall-delay: 0.937s; } .star:nth-child(27) { --star-tail-length: 5.62em; --top-offset: 86.91vh; --fall-duration: 7.084s; --fall-delay: 3.507s; } .star:nth-child(28) { --star-tail-length: 6.74em; --top-offset: 52.95vh; --fall-duration: 6.612s; --fall-delay: 1.089s; } .star:nth-child(29) { --star-tail-length: 5.26em; --top-offset: 35.68vh; --fall-duration: 10.31s; --fall-delay: 9.024s; } .star:nth-child(30) { --star-tail-length: 7.04em; --top-offset: 13.09vh; --fall-duration: 8.7s; --fall-delay: 3.39s; } .star:nth-child(31) { --star-tail-length: 5.95em; --top-offset: 6.88vh; --fall-duration: 7.785s; --fall-delay: 1.268s; } .star:nth-child(32) { --star-tail-length: 5.08em; --top-offset: 5.15vh; --fall-duration: 11.769s; --fall-delay: 5.76.........完整代码请登录后点击上方下载按钮下载查看
网友评论0