div+css实现夜晚天空下星星雨动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现夜晚天空下星星雨动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { overflow:hidden; background-color:#000030; background-image:url("//repo.bfw.wiki/bfwrepo/image/645d7e4864778.png"); background-size:100%; background-position:center; } .starfall { position: absolute; height: 100%; width: 100%; top: 0; left: 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 1000px; perspective: 1000px; z-index: 0; } .starfall .falling-star { width: 8px; height: 8px; background: #00d1b2; position: absolute; border-radius: 50%; opacity: 0.5; } .falling-star:nth-child(1) { -webkit-transform: translateX(68vw) translateY(-8px); transform: translateX(68vw) translateY(-8px); -webkit-animation: anim1 4s infinite; animation: anim1 4s infinite; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } @-webkit-keyframes anim1 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(88vw) translateY(100vh); transform: translateX(88vw) translateY(100vh); opacity: 0; } } @keyframes anim1 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(88vw) translateY(100vh); transform: translateX(88vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(2) { -webkit-transform: translateX(57vw) translateY(-8px); transform: translateX(57vw) translateY(-8px); -webkit-animation: anim2 4s infinite; animation: anim2 4s infinite; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } @-webkit-keyframes anim2 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(77vw) translateY(100vh); transform: translateX(77vw) translateY(100vh); opacity: 0; } } @keyframes anim2 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(77vw) translateY(100vh); transform: translateX(77vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(3) { -webkit-transform: translateX(70vw) translateY(-8px); transform: translateX(70vw) translateY(-8px); -webkit-animation: anim3 4s infinite; animation: anim3 4s infinite; -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } @-webkit-keyframes anim3 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(90vw) translateY(100vh); transform: translateX(90vw) translateY(100vh); opacity: 0; } } @keyframes anim3 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(90vw) translateY(100vh); transform: translateX(90vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(4) { -webkit-transform: translateX(54vw) translateY(-8px); transform: translateX(54vw) translateY(-8px); -webkit-animation: anim4 4s infinite; animation: anim4 4s infinite; -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } @-webkit-keyframes anim4 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(74vw) translateY(100vh); transform: translateX(74vw) translateY(100vh); opacity: 0; } } @keyframes anim4 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(74vw) translateY(100vh); transform: translateX(74vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(5) { -webkit-transform: translateX(85vw) translateY(-8px); transform: translateX(85vw) translateY(-8px); -webkit-animation: anim5 4s infinite; animation: anim5 4s infinite; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } @-webkit-keyframes anim5 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(105vw) translateY(100vh); transform: translateX(105vw) translateY(100vh); opacity: 0; } } @keyframes anim5 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(105vw) translateY(100vh); transform: translateX(105vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(6) { -webkit-transform: translateX(59vw) translateY(-8px); transform: translateX(59vw) translateY(-8px); -webkit-animation: anim6 4s infinite; animation: anim6 4s infinite; -webkit-animation-delay: 1.8s; animation-delay: 1.8s; } @-webkit-keyframes anim6 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(79vw) translateY(100vh); transform: translateX(79vw) translateY(100vh); opacity: 0; } } @keyframes anim6 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(79vw) translateY(100vh); transform: translateX(79vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(7) { -webkit-transform: translateX(33vw) translateY(-8px); transform: translateX(33vw) translateY(-8px); -webkit-animation: anim7 4s infinite; animation: anim7 4s infinite; -webkit-animation-delay: 2.1s; animation-delay: 2.1s; } @-webkit-keyframes anim7 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(53vw) translateY(100vh); transform: translateX(53vw) translateY(100vh); opacity: 0; } } @keyframes anim7 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(53vw) translateY(100vh); transform: translateX(53vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(8) { -webkit-transform: translateX(82vw) translateY(-8px); transform: translateX(82vw) translateY(-8px); -webkit-animation: anim8 4s infinite; animation: anim8 4s infinite; -webkit-animation-delay: 2.4s; animation-delay: 2.4s; } @-webkit-keyframes anim8 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(102vw) translateY(100vh); transform: translateX(102vw) translateY(100vh); opacity: 0; } } @keyframes anim8 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(102vw) translateY(100vh); transform: translateX(102vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(9) { -webkit-transform: translateX(24vw) translateY(-8px); transform: translateX(24vw) translateY(-8px); -webkit-animation: anim9 4s infinite; animation: anim9 4s infinite; -webkit-animation-delay: 2.7s; animation-delay: 2.7s; } @-webkit-keyframes anim9 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(44vw) translateY(100vh); transform: translateX(44vw) translateY(100vh); opacity: 0; } } @keyframes anim9 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(44vw) translateY(100vh); transform: translateX(44vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(10) { -webkit-transform: translateX(54vw) translateY(-8px); transform: translateX(54vw) translateY(-8px); -webkit-animation: anim10 4s infinite; animation: anim10 4s infinite; -webkit-animation-delay: 3s; animation-delay: 3s; } @-webkit-keyframes anim10 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(74vw) translateY(100vh); transform: translateX(74vw) translateY(100vh); opacity: 0; } } @keyframes anim10 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(74vw) translateY(100vh); transform: translateX(74vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(11) { -webkit-transform: translateX(11vw) translateY(-8px); transform: translateX(11vw) translateY(-8px); -webkit-animation: anim11 4s infinite; animation: anim11 4s infinite; -webkit-animation-delay: 3.3s; animation-delay: 3.3s; } @-webkit-keyframes anim11 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(31vw) translateY(100vh); transform: translateX(31vw) translateY(100vh); opacity: 0; } } @keyframes anim11 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(31vw) translateY(100vh); transform: translateX(31vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(12) { -webkit-transform: translateX(14vw) translateY(-8px); transform: translateX(14vw) translateY(-8px); -webkit-animation: anim12 4s infinite; animation: anim12 4s infinite; -webkit-animation-delay: 3.6s; animation-delay: 3.6s; } @-webkit-keyframes anim12 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(34vw) translateY(100vh); transform: translateX(34vw) translateY(100vh); opacity: 0; } } @keyframes anim12 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(34vw) translateY(100vh); transform: translateX(34vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(13) { -webkit-transform: translateX(66vw) translateY(-8px); transform: translateX(66vw) translateY(-8px); -webkit-animation: anim13 4s infinite; animation: anim13 4s infinite; -webkit-animation-delay: 3.9s; animation-delay: 3.9s; } @-webkit-keyframes anim13 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(86vw) translateY(100vh); transform: translateX(86vw) translateY(100vh); opacity: 0; } } @keyframes anim13 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(86vw) translateY(100vh); transform: translateX(86vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(14) { -webkit-transform: translateX(64vw) translateY(-8px); transform: translateX(64vw) translateY(-8px); -webkit-animation: anim14 4s infinite; animation: anim14 4s infinite; -webkit-animation-delay: 4.2s; animation-delay: 4.2s; } @-webkit-keyframes anim14 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(84vw) translateY(100vh); transform: translateX(84vw) translateY(100vh); opacity: 0; } } @keyframes anim14 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(84vw) translateY(100vh); transform: translateX(84vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(15) { -webkit-transform: translateX(3vw) translateY(-8px); transform: translateX(3vw) translateY(-8px); -webkit-animation: anim15 4s infinite; animation: anim15 4s infinite; -webkit-animation-delay: 4.5s; animation-delay: 4.5s; } @-webkit-keyframes anim15 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(23vw) translateY(100vh); transform: translateX(23vw) translateY(100vh); opacity: 0; } } @keyframes anim15 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(23vw) translateY(100vh); transform: translateX(23vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(16) { -webkit-transform: translateX(78vw) translateY(-8px); transform: translateX(78vw) translateY(-8px); -webkit-animation: anim16 4s infinite; animation: anim16 4s infinite; -webkit-animation-delay: 4.8s; animation-delay: 4.8s; } @-webkit-keyframes anim16 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(98vw) translateY(100vh); transform: translateX(98vw) translateY(100vh); opacity: 0; } } @keyframes anim16 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(98vw) translateY(100vh); transform: translateX(98vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(17) { -webkit-transform: translateX(98vw) translateY(-8px); transform: translateX(98vw) translateY(-8px); -webkit-animation: anim17 4s infinite; animation: anim17 4s infinite; -webkit-animation-delay: 5.1s; animation-delay: 5.1s; } @-webkit-keyframes anim17 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(118vw) translateY(100vh); transform: translateX(118vw) translateY(100vh); opacity: 0; } } @keyframes anim17 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(118vw) translateY(100vh); transform: translateX(118vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(18) { -webkit-transform: translateX(34vw) translateY(-8px); transform: translateX(34vw) translateY(-8px); -webkit-animation: anim18 4s infinite; animation: anim18 4s infinite; -webkit-animation-delay: 5.4s; animation-delay: 5.4s; } @-webkit-keyframes anim18 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(54vw) translateY(100vh); transform: translateX(54vw) translateY(100vh); opacity: 0; } } @keyframes anim18 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(54vw) translateY(100vh); transform: translateX(54vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(19) { -webkit-transform: translateX(54vw) translateY(-8px); transform: translateX(54vw) translateY(-8px); -webkit-animation: anim19 4s infinite; animation: anim19 4s infinite; -webkit-animation-delay: 5.7s; animation-delay: 5.7s; } @-webkit-keyframes anim19 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(74vw) translateY(100vh); transform: translateX(74vw) translateY(100vh); opacity: 0; } } @keyframes anim19 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(74vw) translateY(100vh); transform: translateX(74vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(20) { -webkit-transform: translateX(71vw) translateY(-8px); transform: translateX(71vw) translateY(-8px); -webkit-animation: anim20 4s infinite; animation: anim20 4s infinite; -webkit-animation-delay: 6s; animation-delay: 6s; } @-webkit-keyframes anim20 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(91vw) translateY(100vh); transform: translateX(91vw) translateY(100vh); opacity: 0; } } @keyframes anim20 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(91vw) translateY(100vh); transform: translateX(91vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(21) { -webkit-transform: translateX(100vw) translateY(-8px); transform: translateX(100vw) translateY(-8px); -webkit-animation: anim21 4s infinite; animation: anim21 4s infinite; -webkit-animation-delay: 6.3s; animation-delay: 6.3s; } @-webkit-keyframes anim21 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(120vw) translateY(100vh); transform: translateX(120vw) translateY(100vh); opacity: 0; } } @keyframes anim21 { 10% { opacity: 0.5; } 12% { opacity: 1; -webkit-box-shadow: 0 0 3px 0 #fff; box-shadow: 0 0 3px 0 #fff; } 15% { opacity: 0.5; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(120vw) translateY(100vh); transform: translateX(120vw) translateY(100vh); opacity: 0; } } .falling-star:nth-child(22) { -webkit-transform: translateX(26vw) translateY(-8px); transform: translateX(26vw) translateY(-8px); -webkit-animation:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0