css实现月牙中的星空流星动画效果
代码语言:html
所属分类:动画
代码描述:css实现月牙中的星空流星动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Anton'> <style> body { background: #ffe645; height: 100vh; overflow: hidden; display: -webkit-box; display: flex; font-family: 'Anton', sans-serif; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; } .night { position: relative; width: 300px; height: 300px; } .night::after { content: ''; position: absolute; left: 35%; width: 100%; height: 100%; background: #ffe645; border-radius: 100%; -webkit-transform: scale(1.1); transform: scale(1.1); } .night::before { content: ''; position: absolute; bottom: -3%; left: -10%; width: 70%; height: 6%; background: #edcd2b; border-radius: 100%; } .window { position: absolute; width: 100%; height: 100%; background: linear-gradient(-45deg, #0a1433 0%, #222b3f 100%); border-radius: 100%; overflow: hidden; } .star { position: absolute; width: 1px; height: 1px; } .star:nth-child(1) { top: 92%; left: 96%; background: #9c9c9c; } .star:nth-child(2) { top: 97%; left: 47%; background: #b1b1b1; } .star:nth-child(3) { top: 12%; left: 58%; background: #949494; } .star:nth-child(4) { top: 13%; left: 33%; background: #929292; } .star:nth-child(5) { top: 19%; left: 49%; background: gainsboro; } .star:nth-child(6) { top: 57%; left: 25%; background: #a4a4a4; } .star:nth-child(7) { top: 68%; left: 62%; background: #181818; } .star:nth-child(8) { top: 38%; left: 48%; background: #474747; } .star:nth-child(9) { top: 30%; left: 20%; background: #121212; } .star:nth-child(10) { top: 41%; left: 93%; background: whitesmoke; } .star:nth-child(11) { top: 2%; left: 11%; background: #3b3b3b; } .star:nth-child(12) { top: 14%; left: 82%; background: #f2f2f2; } .star:nth-child(13) { top: 76%; left: 13%; background: #353535; } .star:nth-child(14) { top: 70%; left: 4%; background: #848484; } .star:nth-child(15) { top: 85%; left: 76%; background: #292929; } .star:nth-child(16) { top: 39%; left: 82%; background: #d1d1d1; } .star:nth-child(17) { top: 67%; left: 54%; background: #bebebe; } .star:nth-child(18) { top: 49%; left: 82%; background: #161616; } .star:nth-child(19) { top: 9%; left: 18%; background: #545454; } .star:nth-child(20) { top: 93%; left: 9%; background: #232323; } .star:nth-child(21) { top: 14%; left: 17%; background: #fefefe; } .star:nth-child(22) { top: 73%; left: 9%; background: #606060; } .star:nth-child(23) { top: 64%; left: 69%; background: #4c4c4c; } .star:nth-child(24) { top: 21%; left: 1%; background: #535353; } .star:nth-child(25) { top: 58%; left: 53%; background: #5e5e5e; } .star:nth-child(26) { top: 79%; left: 85%; background: #262626; } .star:nth-child(27) { top: 41%; left: 54%; background: #d2d2d2; } .star:nth-child(28) { top: 35%; left: 5%; background: #b9b9b9; } .star:nth-child(29) { top: 39%; left: 4%; background: #4b4b4b; } .star:nth-child(30) { top: 6%; left: 56%; background: #7e7e7e; } .star:nth-child(31) { top: 74%; left: 3%; background: #787878; } .star:nth-child(32) { top: 70%; left: 35%; background: #131313; } .star:nth-child(33) { top: 82%; left: 41%; background: #c1c1c1; } .star:nth-child(34) { top: 30%; left: 89%; background: #979797; } .star:nth-child(35) { top: 79%; left: 9%; background: #dedede; } .star:nth-child(36) { top: 32%; left: 71%; background: #3c3c3c; } .star:nth-child(37) { top: 72%; left: 17%; background: #6e6e6e; } .star:nth-child(38) { top: 38%; left: 7%; background: #f6f6f6; } .star:nth-child(39) { top: 29%; left: 65%; background: #dbdbdb; } .star:nth-child(40) { top: 1%; left: 73%; background: #a7a7a7; } .star:nth-child(41) { top: 42%; left: 52%; background: #4b4b4b; } .star:nth-child(42) { top: 61%; left: 30%; background: #686868; } .star:nth-child(43) { top: 93%; left: 37%; background: #777777; } .star:nth-child(44) { top: 33%; left: 38%; background: #8e8e8e; } .star:nth-child(45) { top: 64%; left: 11%; background: #252525; } .star:nth-child(46) { top: 13%; left: 60%; background: #b3b3b3; } .star:nth-child(47) { top: 34%; left: 47%; background: #cccccc; } .star:nth-child(48) { top: 80%; left: 86%; background: #949494; } .star:nth-child(49) { top: 36%; left: 35%; background: #adadad; } .star:nth-child(50) { top: 57%; left: 82%; background: #bcbcbc; } .star:nth-child(51) { top: 22%; left: 97%; background: #1b1b1b; } .star:nth-child(52) { top: 83%; left: 87%; background: dimgray; } .star:nth-child(53) { top: 10%; left: 8%; background: #cdcdcd; } .star:nth-child(54) { top: 8%; left: 97%; background: #626262; } .star:nth-child(55) { top: 27%; left: 85%; background: #939393; } .star:nth-child(56) { top: 100%; left: 1%; background: #404040; } .star:nth-child(57) { top: 45%; left: 56%; background: #1b1b1b; } .star:nth-child(58) { top: 58%; left: 78%; background: #a6a6a6; } .star:nth-child(59) { top: 48%; left: 46%; background: #3f3f3f; } .star:nth-child(60) { top: 1%; left: 81%; background: #888888; } .star:nth-child(61) { top: 17%; left: 36%; background: #a0a0a0; } .star:nth-child(62) { top: 14%; left: 9%; background: #898989; } .star:nth-child(63) { top: 64%; left: 92%; background: #0d0d0d; } .star:nth-child(64) { top: 43%; left: 82%; background: #3e3e3e; } .star:nth-child(65) { top: 80%; left: 51%; background: #a5a5a5; } .star:nth-child(66) { top: 40%; left: 62%; background: #fcfcfc; } .star:nth-child(67) { top: 98%; left: 72%; background: #101010; } .star:nth-child(68) { top: 47%; left: 1%; background: #6c6c6c; } .star:nth-child(69) { top: 64%; left: 40%; background: #868686; } .star:nth-child(70) { top: 6%; left: 58%; background: #373737; } .star:nth-child(71) { top: 98%; left: 64%; background: #cbcbcb; } .star:nth-child(72) { top: 93%; left: 46%; background: #9f9f9f; } .star:nth-child(73) { top: 85%; left: 73%; background: lightgray; } .star:nth-child(74) { top: 85%; left: 67%; background: #efefef; } .star:nth-child(75) { top: 23%; left: 33%; background: #787878; } .star:nth-child(76) { top: 19%; left: 84%; background: #d9d9d9; } .star:nth-child(77) { top: 92%; left: 8%; background: #a2a2a2; } .star:nth-child(78) { top: 34%; left: 4%; background: #c7c7c7; } .star:nth-child(79) { top: 30%; left: 33%; background: #cdcdcd; } .star:nth-child(80) { top: 62%; left: 32%; background: #0d0d0d; } .star:nth-child(81) { top: 3%; left: 44%; background: #3a3a3a; } .star:nth-child(82) { top: 18%; left: 33%; background: #2f2f2f; } .star:nth-child(83) { top: 38%; left: 7%; background: #b0b0b0; } .star:nth-child(84) { top: 68%; left: 89%; background: #828282; } .star:nth-child(85) { top: 92%; left: 56%; background: #f8f8f8; } .star:nth-child(86) { top: 80%; left: 86%; background: #2a2a2a; } .star:nth-child(87) { top: 81%; left: 57%; background: #1b1b1b; } .star:nth-child(88) { top: 60%; left: 7%; background: #f7f7f7; } .star:nth-child(89) { top: 4%; left: 61%; background: #dfdfdf; } .star:nth-child(90) { top: 90%; left: 87%; background: #c5c5c5; } .star:nth-child(91) { top: 37%; left: 94%; background: #d2d2d2; } .star:nth-child(92) { top: 10%; left: 25%; background: #e9e9e9; } .star:nth-child(93) { top: 21%; left: 7%; background: #747474; } .star:nth-child(94) { top: 21%; left: 21%; background: #1f1f1f; } .star:nth-child(95) { top: 56%; left: 46%; background: #bebebe; } .star:nth-child(96) { top: 62%; left: 93%; background: #6b6b6b; } .star:nth-child(97) { top: 26%; left: 29%; background: #1d1d1d; } .star:nth-child(98) { top: 20%; left: 23%; background: #aeaeae; } .star:nth-child(99) { top: 70%; left: 67%; background: #383838; } .star:nth-child(100) { top: 91%; left: 87%; background: #585858; } .star:nth-child(101) { top: 94%; left: 35%; background: #141414; } .star:nth-child(102) { top: 28%; left: 93%; background: #737373; } .star:nth-child(103) { top: 27%; left: 17%; background: #666666; } .star:nth-child(104) { top: 48%; left: 76%; background: #555555; } .star:nth-child(105) { top: 18%; left: 18%; background: #656565; } .star:nth-child(106) { top: 37%; left: 78%; background: #797979; } .star:nth-child(107) { top: 31%; left: 96%; background: #b4b4b4; } .star:nth-child(108) { top: 37%; left: 24%; background: #040404; } .star:nth-child(109) { top: 73%; left: 28%; background: #e0e0e0; } .star:nth-child(110) { top: 20%; left: 2%; background: #515151; } .star:nth-child(111) { top: 44%; left: 49%; background: #101010; } .star:nth-child(112) { top: 85%; left: 41%; background: #f3f3f3; } .star:nth-child(113) { top: 38%; left: 6%; background: #242424; } .star:nth-child(114) { top: 93%; left: 92%; background: #292929; } .star:nth-child(115) { top: 33%; left: 23%; background: #dfdfdf; } .star:nth-child(116) { top: 75%; left: 79%; background: white; } .star:nth-child(117) { top: 58%; left: 87%; background: #222222; } .star:nth-child(118) { top: 51%; left: 66%; background: #d0d0d0; } .star:nth-child(119) { top: 67%; left: 87%; background: #989898; } .star:nth-child(120) { top: 81%; left: 33%; background: #c9c9c9; } .star:nth-child(121) { top: 25%; left: 72%; background: #080808; } .star:nth-child(122) { top: 67%; left: 67%; background: #707070; } .star:nth-child(123) { top: 64%; left: 98%; background: #434343; } .star:nth-child(124) { top: 56%; left: 38%; background: #313131; } .star:nth-child(125) { top: 62%; left: 37%; background: #ececec; } .star:nth-child(126) { top: 62%; left: 13%; background: #818181; } .star:nth-child(127) { top: 76%; left: 63%; background: #f1f1f1; } .star:nth-child(128) { top: 10%; left: 7%; background: #2c2c2c; } .star:nth-child(129) { top: 63%; left: 88%; background: #1e1e1e; } .star:nth-child(130) { top: 52%; left: 93%; background: #c7c7c7; } .star:nth-child(131) { top: 31%; left: 43%; background: #212121; } .star:nth-child(132) { top: 34%; left: 17%; background: #333333; } .star:nth-child(133) { top: 66%; left: 54%; background: #cacaca; } .star:nth-child(134) { top: 86%; left: 25%; background: dimgray; } .star:nth-child(135) { top: 15%; left: 4%; background: #333333; } .star:nth-child(136) { top: 46%; left: 16%; background: #d5d5d5; } .star:nth-child(137) { top: 71%; left: 58%; background: #444444; } .star:nth-child(138) { top: 3%; left: 4%; background: #dbdbdb; } .star:nth-child(139) { top: 26%; left: 20%; background: #262626; } .star:nth-child(140) { top: 36%; left: 38%; background: #919191; } .star:nth-child(141) { top: 71%; left: 19%; background: #ededed; } .star:nth-child(142) { top: 47%; left: 24%; background: #606060; } .star:nth-child(143) { top: 33%; left: 92%; background: #6e6e6e; } .star:nth-child(144) { top: 94%; left: 64%; background: #9b9b9b; } .star:nth-child(145) { top: 57%; left: 72%; background: #b1b1b1; } .star:nth-child(146) { top: 79%; left: 9%; background: #c3c3c3; } .star:nth-child(147) { top: 41%; left: 89%; background: #cccccc; } .star:nth-child(148) { top: 94%; left: 51%; background: #282828; } .star:nth-child(149) { top: 27%; left: 78%; background: #8a8a8a; } .star:nth-child(150) { top: 34%; left: 40%; background: #3c3c3c; } .star:nth-child(151) { top: 1%; left: 27%; background: #c9c9c9; } .star:nth-child(152) { top: 11%; left: 45%; background: #2c2c2c; } .star:nth-child(153) { top: 84%; left: 76%; background: #252525; } .star:nth-child(154) { top: 33%; left: 13%; background: #dddddd; } .star:nth-child(155) { top: 88%; left: 6%; background: #1b1b1b; } .star:nth-child(156) { top: 7%; left: 43%; background: #717171; } .star:nth-child(157) { top: 4%; left: 62%; background: #f3f3f3; } .star:nth-child(158) { top: 66%; left: 34%; background: #6b6b6b; } .star:nth-child(159) { top: 70%; left: 54%; background: #929292; } .star:nth-child(160) { top: 90%; left: 24%; background: #3a3a3a; } .star:nth-child(161) { top: 88%; left: 11%; background: #434343; } .star:nth-child(162) { top: 93%; left: 10%; background: #adadad; } .star:nth-child(163) { top: 31%; left: 81%; background: #747474; } .star:nth-child(164) { top: 44%; left: 8%; background: #d8d8d8; } .star:nth-child(165) { top: 41%; left: 58%; background: #4e4e4e; } .star:nth-child(166) { top: 8%; left: 66%; background: #adadad; } .star:nth-child(167) { top: 8%; left: 47%; background: #747474; } .star:nth-child(168) { top: 56%; left: 79%; background: #0a0a0a; } .star:nth-child(169) { top: 16%; left: 24%; background: #333333; } .star:nth-child(170) { top: 53%; left: 99%; background: #333333; } .star:nth-child(171) { top: 62%; left: 26%; background: #878787; } .star:nth-child(172) { top: 51%; left: 23%; background: #121212; } .star:nth-child(173) { top: 75%; left: 40%; background: #707070; } .star:nth-child(174) { top: 86%; left: 51%; background: #bcbcbc; } .star:nth-child(175) { top: 46%; left: 10%; background: #f3f3f3; } .star:nth-child(176) { top: 70%; left: 91%; background: #cccccc; } .star:nth-child(177) { top: 82%; left: 71%; background: #e9e9e9; } .star:nth-child(178) { top: 25%; left: 71%; background: #1d1d1d; } .star:nth-child(179) { top: 36%; left: 4%; background: #282828; } .star:nth-child(180) { top: 25%; left: 67%; background: #bababa; } .star:nth-child(181) { top: 88%; left: 9%; background: #5b5b5b; } .star:nth-child(182) { top: 49%; left: 21%; background: #a3a3a3; } .star:nth-child(183) { top: 60%; left: 43%; background: #dddddd; } .star:nth-child(184) { top: 82%; left: 42%; background: #161616; } .star:nth-child(185) { top: 56%; left: 94%; background: #454545; } .star:nth-child(186) { top: 41%; left: 55%; background: #585858; } .star:nth-child(187) { top: 55%; left: 8%; background: #e3e3e3; } .star:nth-child(188) { top: 48%; left: 74%; background: #989898; } .star:nth-child(189) { top: 96%; left: 11%; background: #494949; } .star:nth-child(190) { top: 36%; left: 53%; background: #e8e8e8; } .star:nth-child(191) { top: 60%; left: 32%; background: #fbfbfb; } .star:nth-child(192) { top: 88%; left: 86%; background: #7f7f7f; } .star:nth-child(193) { top: 85%; left: 69%; background: #555555; } .star:nth-child(194) { top: 81%; left: 68%; background: #a2a2a2; } .star:nth-child(195) { top: 32%; left: 16%; background: #949494; } .star:nth-child(196) { top: 62%; left: 58%; background: #676767; } .star:nth-child(197) { top: 29%; left: 100%; background: #343434; } .star:nth-child(198) { top: 69%; left: 21%; background: #888888; } .star:nth-child(199) { top: 36%; left: 40%; background: #666666; } .star:nth-child(200) { top: 41%; left: 56%; background: #040404; } .star:nth-child(201) { top: 27%; left: 10%; background: #969696; } .star:nth-child(202) { top: 13%; left: 12%; background: #040404; } .star:nth-child(203) { top: 48%; left: 18%; background: #414141; } .star:nth-child(204) { top: 82%; left: 3%; background: #c3c3c3; } .star:nth-child(205) { top: 82%; left: 19%; background: #9e9e9e; } .star:nth-child(206) { top: 64%; left: 47%; background: #121212; } .star:nth-child(207) { top: 65%; left: 89%; background: #050505; } .star:nth-child(208) { top: 73%; left: 99%; background: #e8e8e8; } .star:nth-child(209) { top: 88%; left: 87%; background: #0f0f0f; } .star:nth-child(210) { top: 20%; left: 31%; background: #d8d8d8; } .star:nth-child(211) { top: 99%; left: 24%; background: #686868; } .star:nth-child(212) { top: 49%; left: 39%; background: #737373; } .star:nth-child(213) { top: 68%; left: 50%; background: #f6f6f6; } .star:nth-child(214) { top: 70%; left: 99%; background: #939393; } .star:nth-child(215) { top: 95%; left: 15%; background: #414141; } .star:nth-child(216) { top: 62%; left: 80%; background: #444444; } .star:nth-child(217) { top: 85%; left: 97%; background: #383838; } .star:nth-child(218) { top: 90%; left: 39%; background: #282828; } .star:nth-child(219) { top: 28%; left: 66%; background: #e3e3e3; } .star:nth-child(220) { top: 47%; left: 11%; background: #cecece; } .star:nth-child(221) { top: 95%; left: 22%; background: #212121; } .star:nth-child(222) { top: 11%; left: 85%; background: #5a5a5a; } .star:nth-child(223) { top: 60%; left: 46%; background: #333333; } .star:nth-child(224) { top: 36%; left: 7%; background: #474747; } .star:nth-child(225) { top: 38%; left: 58%; background: #3a3a3a; } .star:nth-child(226) { top: 66%; left: 87%; background: #6e6e6e; } .star:nth-child(227) { top: 35%; left: 73%; background: #4c4c4c; } .star:nth-child(228) { top: 39%; left: 5%; background: #d9d9d9; } .star:nth-child(229) { top: 58%; left: 16%; background: #676767; } .star:nth-child(230) { top: 40%; left: 55%; background: #e5e5e5; } .star:nth-child(231) { top: 93%; left: 61%; background: #ababab; } .star:nth-child(232) { top: 21%; left: 64%; background: #e2e2e2; } .star:nth-child(233) { top: 26%; left: 37%; background: #b4b4b4; } .star:nth-child(234) { top: 18%; left: 42%; background: #9d9d9d; } .star:nth-child(235) { top: 12%; left: 90%; background: #bdbdbd; } .star:nth-child(236) { top: 37%; left: 73%; background: #aeaeae; } .star:nth-child(237) { top: 5%; left: 38%; background: #111111; } .star:nth-child(238) { top: 18%; left: 81%; background: #f6f6f6; } .star:nth-child(239) { top: 7%; left: 53%; background: #313131; } .star:nth-child(240) { top: 48%; left: 97%; background: #ebebeb; } .star:nth-child(241) { top: 66%; left: 88%; background: #a2a2a2; } .star:nth-child(242) { top: 85%; left: 51%; background: #5d5d5d; } .star:nth-child(243) { top: 32%; left: 21%; background: #e8e8e8; } .star:nth-child(244) { top: 44%; left: 9%; background: #c3c3c3; } .star:nth-child(245) { top: 64%; left: 71%; background: #626262; } .star:nth-child(246) { top: 85%; left: 46%; background: #adadad; } .star:nth-child(247) { top: 1%; left: 20%; background: #fefefe; } .star:nth-child(248) { top: 55%; left: 65%; background: #101010; } .star:nth-child(249) { top: 39%; left: 60%; background: #343434; } .star:nth-child(250) { top: 64%; left: 92%; background: #eaeaea; } .stars { position: absolute; width: 100%; height: 100%; -webkit-animation: slide 30000ms linear infinite; animation: slide 30000ms linear infinite; } .stars:nth-child(2) { left: 100%; } .shooting { position: absolute; width: 50px; height: 1px; background: -webkit-gradient(linear, left top, right top, from(white), to(rgba(255, 255, 255, 0))); background: linear-gradient(90deg, white, rgba(255, 255, 255, 0)); background: -webkit-gradient(linear, left top, right top, from(#0093e9), to(rgba(128, 208, 199, 0))); background: linear-gradient(90deg, #0093e9 0%, rgba(128, 208, 199, 0) 100%); opacity: 0; -webkit-animation: shooting 5000ms linear infinite; animation: shooting 5000ms linear infinite; } .shooting:nth-child(1) { top: 4%; left: 70%; -webkit-animation-delay: 2036ms; animation-delay: 2036ms; } .shooting:nth-child(2) { top: 56%; left: 57%; -webkit-animation-delay: 4892ms; animation-delay: 4892ms; } .shooting:nth-child(3) { top: 5%; left: 52%; -webkit-animation-delay: 1081ms; animation-delay: 1081ms; } .shooting:nth-child(4) { top: 18%; left: 12%; -webkit-animation-delay: 9328ms; animation-delay: 9328ms; } .shooting:nth-child(5) { top: 61%; left: 11%; -webkit-animation-delay: 5409ms; animation-delay: 5409ms; } .shooting:nth-child(6) { top: 84%; left: 26%; -webkit-animation-delay: 2908ms; animation-delay: 2908ms; } .shooting:nth-child(7) { top: 81%; left: 13%; -webkit-animation-delay: 5610ms; animation-delay: 5610ms; } .shooting:nth-child(8) { top: 2%; left: 99%; -webkit-animation-delay: 6465ms; animation-delay: 6465ms; } .shooting:nth-child(9) { top: 54%; left: 25%; -webkit-animation-delay: 9276ms; animation-delay: 9276ms; } .shooting:nth-child(10) { top: 42%; left: 58%; -webkit-animation-delay: 6913ms; animation-delay: 6913ms; } .shooting:nth-child(11) { top: 71%; left: 49%; -webkit-animation-delay: 1998ms; animation-delay: 1998ms; } .shooting:nth-child(12) { top: 63%; left: 39%; -webkit-animation-delay: 7875ms; animation-delay: 7875ms; } .shooting:nth-child(13) { top: 96%; left: 28%; -webkit-animation-delay: 2106ms; animation-delay: 2106ms; } .shooting:nth-child(14) { top: 18%; left: 30%; -webkit-animation-delay: 1775ms; animation-delay: 1775ms; } .shooting:nth-child(15) { top: 30%; left: 12%; -webkit-animation-delay: 3800ms; animation-delay: 3800ms; } .shooting:nth-child(16) { top: 31%; left: 23%; -webkit-animation-delay: 8086ms; animation-delay: 8086ms; } .shooting:nth-child(17) { top: 37%; left: 48%; -webkit-animation-delay: 6547ms; animation-delay: 6547ms; } .shooting:nth-child(18) { top: 8%; left: 26%; -webkit-animation-delay: 8536ms; animation-delay: 8536ms; } .shooting:nth-child(19) { top: 17%; left: 31%; -webkit-animation-delay: 582ms; animation-delay: 582ms; } .shooting:nth-child(20) { top: 100%; left: 76%; -webkit-animation-delay: 84ms; animation-delay: 84ms; } .shooting:nth-child(21) { top: 53%; left: 100%; -webkit-animation-delay: 2708ms; animation-delay: 2708ms; } .shooting:nth-child(22) { top: 52%; left: 99%; -webkit-animation-delay: 505ms; animation-delay: 505ms; } .shooting:nth-child(23) { top: 20%; left: 81%; -webkit-animation-delay: 4884ms; animation-delay: 4884ms; } .shooting:nth-child(24) { top: 53%; left: 99%; -webkit-animation-delay: 869ms; animation-delay: 869ms; } .shooting:nth-child(25) { top: 4%; left: 7%; -webkit-animation-delay: 765ms; animation-delay: 765ms; } .shooting:nth-child(26) { top: 63%; left: 60%; -webkit-animation-delay: 2969ms; animation-delay: 2969ms; } .shooting:nth-child(27) { top: 39%; left: 18%; -webkit-animation-delay: 5983ms; animation-delay: 5983ms; } .shooting:nth-child(28) { top: 38%; left: 91%; -webkit-animation-delay: 9976ms; animation-delay: 9976ms; } .shooting:nth-child(29) { top: 2%; left: 3%; -webkit-animation-delay: 570ms; animation-delay: 570ms; } .shooting:nth-child(30) { top: 53%; left: 26%; -webkit-animation-delay: 8203ms; animation-delay: 8203ms; } .shooting:nth-child(31) { top: 35%; left: 33%; -webkit-animation-delay: 7265ms; animation-delay: 7265ms; } .shooting:nth-child(32) { top: 22%; left: 79%; -webkit-animation-delay: 1042ms; animation-delay: 1042ms; } .shooting:nth-child(33) { top: 1%; left: 96%; -webkit-animation-delay: 4650ms; animation-delay: 4650ms; } .shooting:nth-child(34) { top: 98%; left: 65%; -webkit-animation-delay: 3732ms; animation-delay: 3732ms; } .shooting:nth-child(35) { top: 86%; left: 92%; -webkit-animation-delay: 2105ms; animation-delay: 2105ms; } .shooting:nth-child(36) { top: 6%; left: 23%; -webkit-animation-delay: 7402ms; animation-delay: 7402ms; } .shooting:nth-child(37) { top: 52%; left: 76%; -webkit-animation-delay: 7406ms; animation-delay: 7406ms; } .shooting:nth-child(38) { top: 75%; left: 90%; -webkit-animation-delay: 7981ms; animation-delay: 7981ms; } .shooting:nth-child(39) { top: 6%; left: 77%; -webkit-animation-delay: 6464ms; animation-delay: 6464ms; } .shooting:nth-child(40) { top: 87%; left: 90%; -webkit-animation-delay: 3535ms; animation-delay: 3535ms; } .shooting:nth-child(41) { top: 85%; left: 30%; -webkit-animation-delay: 3820ms; animation-delay: 3820ms; } .shooting:nth-child(42) { top: 83%; left: 86%; -webkit-animation-delay: 7581ms; animation-delay: 7581ms; } .shooting:nth-child(43) { top: 78%; left: 50%; -webkit-animation-delay: 7634ms; animation-delay: 7634ms; } .shooting:nth-child(44) { top: 86%; left: 49%; -webkit-animation-delay: 8287ms; animation-delay: 8287ms; } .shooting:nth-child(45) { top: 14%; left: 95%; -webkit-animation-delay: 613ms; animation-delay: 613ms; } .shooting:nth-child(46) { top: 94%; left: 40%; -webkit-animation-delay: 6760ms; animation-delay: 6760ms; } .shooting:nth-child(47) { top: 13%; left: 11%; -webkit-animation-delay: 1439ms; animation-delay: 1439ms; } .shooting:nth-child(48) { top: 91%; left: 42%; -webkit-animation-delay: 3465ms; animation-delay: 3465ms; } .shooting:nth-child(49) { top: 71%; left: 3%; -webkit-animation-delay: 8389ms; animation-delay: 8389ms; } .shooting:nth-child(50) { top: 2%; left: 92%; -webkit-animation-delay: 2426ms; animation-delay: 2426ms; } @-webkit-keyframes shooting { 0% { opacity: 0; -webkit-transform: rotateZ(-30deg) translateX(0) scaleX(0); transform: rotateZ(-30deg) translateX(0) scaleX(0); } 25% { opacity: 1; -webkit-transform: rotateZ(-30deg) transalteX(-200%) scaleX(1); transform: rotateZ(-30deg) transalteX(-200%) scaleX(1); } 50% { opacity: 0; -webkit-transform: rotateZ(-30deg) translateX(-400%) scaleX(2); transform: rotateZ(-30deg) translateX(-400%) scaleX(2); } 100% { opacity: 0; -webkit-transform: rotateZ(-30deg) translateX(-400%) scaleX(2); transform: rotateZ(-30deg) translateX(-400%) scaleX(2); } } @keyframes shooting { 0%.........完整代码请登录后点击上方下载按钮下载查看
网友评论0