纯css模拟日食全过程带星星动画效果
代码语言:html
所属分类:动画
代码描述:纯css模拟日食全过程带星星动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { position: absolute; width: 100%; height: 100%; padding: 0; margin: 0; -moz-animation: bgcolor 9s ease-in-out infinite; -webkit-animation: bgcolor 9s ease-in-out infinite; animation: bgcolor 9s ease-in-out infinite; } #sun { position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 250px; height: 250px; -moz-border-radius: 250px; -webkit-border-radius: 250px; border-radius: 250px; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; background: #ffad00; z-index: 1; } #sun::before { content: ""; display: block; position: absolute; top: 3px; left: 3px; width: 244px; height: 244px; -moz-border-radius: 244px; -webkit-border-radius: 244px; border-radius: 244px; -moz-animation: bgcolor 9s ease-in-out infinite, moon 9s ease-in-out infinite; -webkit-animation: bgcolor 9s ease-in-out infinite, moon 9s ease-in-out infinite; animation: bgcolor 9s ease-in-out infinite, moon 9s ease-in-out infinite; } .star { background: #fff; height: 2px; width: 2px; position: absolute; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-animation: twinkle 5s infinite; -webkit-animation: twinkle 5s infinite; animation: twinkle 5s infinite; } .star:nth-of-type(1) { animation-delay: -15s; top: 29vh; left: 42vw; } .star:nth-of-type(2) { animation-delay: -4s; top: 84vh; left: 82vw; } .star:nth-of-type(3) { animation-delay: -7s; top: 39vh; left: 47vw; } .star:nth-of-type(4) { animation-delay: -3s; top: 88vh; left: 29vw; } .star:nth-of-type(5) { animation-delay: -6s; top: 65vh; left: 73vw; } .star:nth-of-type(6) { animation-delay: -10s; top: 9vh; left: 28vw; } .star:nth-of-type(7) { animation-delay: -4s; top: 54vh; left: 28vw; } .star:nth-of-type(8) { animation-delay: -17s; top: 19vh; left: 10vw; } .star:nth-of-type(9) { animation-delay: -5s; top: 41vh; left: 41vw; } .star:nth-of-type(10) { animation-delay: -4s; top: 49vh; left: 52vw; } .star:nth-of-type(11) { animation-delay: -17s; top: 89vh; left: 53vw; } .star:nth-of-type(12) { animation-delay: -10s; top: 90vh; left: 61vw; } .star:nth-of-type(13) { animation-delay: -1s; top: 80vh; left: 64vw; } .star:nth-of-type(14) { animation-delay: -12s; top: 15vh; left: 10vw; } .star:nth-of-type(15) { animation-delay: -18s; top: 23vh; left: 67vw; } .star:nth-of-type(16) { animation-delay: -8s; top: 23vh; left: 83vw; } .star:nth-of-type(17) { animation-delay: -14s; top: 53vh; left: 61vw; } .star:nth-of-type(18) { animation-delay: -14s; top: 26vh; left: 98vw; } .star:nth-of-type(19) { animation-delay: -3s; top: 60vh; left: 74vw; } .star:nth-of-type(20) { animation-delay: -20s; top: 14vh; left: 96vw; } .star:nth-of-type(21) { animation-delay: -8s; top: 2vh; left: 21vw; } .star:nth-of-type(22) { animation-delay: -5s; top: 91vh; left: 75vw; } .star:nth-of-type(23) { animation-delay: -1s; top: 57vh; left: 15vw; } .star:nth-of-type(24) { animation-delay: -3s; top: 22vh; left: 12vw; } .star:nth-of-type(25) { animation-delay: -14s; top: 24vh; left: 75vw; } .star:nth-of-type(26) { animation-delay: -4s; top: 99vh; left: 4vw; } .star:nth-of-type(27) { animation-delay: -13s; top: 38vh; left: 63vw; } .star:nth-of-type(28) { animation-delay: -13s; top: 62vh; left: 1vw; } .star:nth-of-type(29) { animation-delay: -17s; top: 68vh; left: 18vw; } .star:nth-of-type(30) { animation-delay: -6s; top: 86vh; left: 82vw; } .star:nth-of-type(31) { animation-delay: -10s; top: 87vh; left: 59vw; } .star:nth-of-type(32) { animation-delay: -3s; top: 46vh; left: 91vw; } .star:nth-of-type(33) { animation-delay: -11s; top: 62vh; left: 40vw; } .star:nth-of-type(34) { animation-delay: -19s; top: 37vh; left: 87vw; } .star:nth-of-type(35) { animation-delay: -18s; top: 41vh; left: 39vw; } .star:nth-of-type(36) { animation-delay: -4s; top: 91vh; left: 34vw; } .star:nth-of-type(37) { animation-delay: -12s; top: 71vh; left: 75vw; } .star:nth-of-type(38) { animation-delay: -19s; top: 88vh; left: 42vw; } .star:nth-of-type(39) { animation-delay: -10s; top: 56vh; left: 34vw; } .star:nth-of-type(40) { animation-delay: -12s; top: 39vh; left: 79vw; } .star:nth-of-type(41) { animation-delay: -13s; top: 76vh; left: 84vw; } .star:nth-of-type(42) { animation-delay: -17s; top: 54vh; left: 43vw; } .star:nth-of-type(43) { animation-delay: -19s; top: 4vh; left: 71vw; } .star:nth-of-type(44) { animation-delay: -18s; top: 86vh; left: 38vw; } .star:nth-of-type(45) { animation-delay: -1s; top: 70vh; left: 99vw; } .star:nth-of-type(46) { animation-delay: -17s; top: 14vh; left: 33vw; } .star:nth-of-type(47) { animation-delay: -8s; top: 10vh; left: 12vw; } .star:nth-of-type(48) { animation-delay: -12s; top: 36vh; left: 36vw; } .star:nth-of-type(49) { animation-delay: -4s; top: 99vh; left: 93vw; } .star:nth-of-type(50) { animation-delay: -14s; top: 16vh; left: 33vw; } .star:nth-of-type(51) { animation-delay: -3s; top: 19vh; left: 39vw; } .star:nth-of-type(52) { animation-delay: -11s; top: 80vh; left: 18vw; } .star:nth-of-type(53) { animation-delay: -12s; top: 31vh; left: 82vw; } .star:nth-of-type(54) { animation-delay: -20s; top: 31vh; left: 95vw; } .star:nth-of-type(55) { animation-delay: -10s; top: 64vh; left: 61vw; } .star:nth-of-type(56) { animation-delay: -13s; top: 53vh; left: 54vw; } .star:nth-of-type(57) { animation-delay: -10s; top: 50vh; left: 59vw; } .star:nth-of-type(58) { animation-delay: -16s; top: 75vh; left: 97vw; } .star:nth-of-type(59) { animation-delay: -18s; top: 13vh; left: 39vw; } .star:nth-of-type(60) { animation-delay: -3s; top: 41vh; left: 11vw; } .star:nth-of-type(61) { animation-delay: -11s; top: 80vh; left: 89vw; } .star:nth-of-type(62) { animation-delay: -8s; top: 66vh; left: 79vw; } .star:nth-of-type(63) { animation-delay: -16s; top: 6vh; left: 25vw; } .star:nth-of-type(64) { animation-delay: -12s; top: 78vh; left: 67vw; } .star:nth-of-type(65) { animation-delay: -11s; top: 11vh; left: 27vw; } .star:nth-of-type(66) { animation-delay: -3s; top: 60vh; left: 23vw; } .star:nth-of-type(67) { animation-delay: -17s; top: 8vh; left: 82vw; } .star:nth-of-type(68) { animation-delay: -9s; top: 89vh; left: 88vw; } .star:nth-of-type(69) { animation-delay: -3s; top: 12vh; left: 99vw; } .star:nth-of-type(70) { animation-delay: -8s; top: 80vh; left: 13vw; } .star:nth-of-type(71) { animation-delay: -9s; top: 3vh; left: 51vw; } .star:nth-of-type(72) { animation-delay: -11s; top: 7vh; left: 29vw; } .star:nth-of-type(73) { animation-delay: -15s; top: 66vh; left: 6vw; } .star:nth-of-type(74) { animation-delay: -13s; top: 68vh; left: 99vw; } .star:nth-of-type(75) { animation-delay: -9s; top: 58vh; left: 78vw; } .star:nth-of-type(76) { animation-delay: -6s; top: 93vh; left: 21vw; } .star:nth-of-type(77) { animation-delay: -3s; top: 45vh; left: 75vw; } .star:nth-of-type(78) { animation-delay: -10s; top: 46vh; left: 81vw; } .star:nth-of-type(79) { animation-delay: -13s; top: 92vh; left: 90vw; } .star:nth-of-type(80) { animation-delay: -19s; top: 39vh; left: 93vw; } .star:nth-of-type(81) { animation-delay: -13s; top: 92vh; left: 68vw; } .star:nth-of-type(82) { animation-delay: -3s; top: 84vh; left: 1vw; } .star:nth-of-type(83) { animation-delay: -8s; top: 76vh; left: 49vw; } .star:nth-of-type(84) { animation-delay: -17s; top: 5vh; left: 3vw; } .star:nth-of-type(85) { animation-delay: -8s; top: 2vh; left: 93vw; } .star:nth-of-type(86) { animation-delay: -8s; top: 36vh; left: 42vw; } .star:nth-of-type(87) { animation-delay: -9s; top: 55vh; left: 17vw; } .star:nth-of-type(88) { animation-delay: -5s; top: 82vh; left: 15vw; } .star:nth-of-type(89) { animation-delay: -11s; top: 32vh; left: 88vw; } .star:nth-of-type(90) { animation-delay: -19s; top: 24vh; left: 64vw; } .star:nth-of-type(91) { animation-delay: -11s; top: 80vh; left: 48vw; } .star:nth-of-type(92) { animation-delay: -8s; top: 63vh; left: 41vw; } .star:nth-of-type(93) { animation-delay: -7s; top: 27vh; left: 87vw; } .star:nth-of-type(94) { animation-delay: -9s; top: 91vh; left: 14vw; } .star:nth-of-type(95) { animation-delay: -20s; top: 81vh; left: 63vw; } .star:nth-of-type(96) { animation-delay: -8s; top: 44vh; left: 37vw; } .star:nth-of-type(97) { animation-delay: -3s; top: 1vh; left: 13vw; } .star:nth-of-type(98) { animation-delay: -18s; top: 79vh; left: 94vw; } .star:nth-of-type(99) { animation-delay: -5s; top: 63vh; left: 1vw; } .star:nth-of-type(100) { animation-delay: -15s; top: 75vh; left: 89vw; } .star:nth-of-type(101) { animation-delay: -10s; top: 53vh; left: 93vw; } .star:nth-of-type(102) { animation-delay: -7s; top: 63vh; left: 87vw; } .star:nth-of-type(103) { animation-delay: -12s; top: 33vh; left: 80vw; } .star:nth-of-type(104) { animation-delay: -2s; top: 26vh; left: 43vw; } .star:nth-of-type(105) { animation-delay: -19s; top: 14vh; left: 38vw; } .star:nth-of-type(106) { animation-delay: -18s; top: 91vh; left: 43vw; } .star:nth-of-type(107) { animation-delay: -6s; top: 77vh; left: 24vw; } .star:nth-of-type(108) { animation-delay: -1s; top: 84vh; left: 43vw; } .star:nth-of-type(109) { animation-delay: -18s; top: 68vh; left: 66vw; } .star:nth-of-type(110) { animation-delay: -18s; top: 11vh; left: 43vw; } .star:nth-of-type(111) { animation-delay: -12s; top: 17vh; left: 11vw; } .star:nth-of-type(112) { animation-delay: -20s; top: 89vh; left: 5vw; } .star:nth-of-type(113) { animation-delay: -12s; top: 54vh; left: 48vw; } .star:nth-of-type(114) { animation-delay: -10s; top: 63vh; left: 12vw; } .star:nth-of-type(115) { animation-delay: -10s; top: 61vh; left: 68vw; } .star:nth-of-type(116) { animation-delay: -9s; top: 5vh; left: 26vw; } .star:nth-of-type(117) { animation-delay: -10s; top: 4vh; left: 20vw; } .star:nth-of-type(118) { animation-delay: -7s; top: 15vh; left: 2vw; } .star:nth-of-type(119) { animation-delay: -20s; top: 14vh; left: 87vw; } .star:nth-of-type(120) { animation-delay: -4s; top: 13vh; left: 29vw; } .star:nth-of-type(121) { animation-delay: -12s; top: 50vh; left: 59vw; } .star:nth-of-type(122) { animation-delay: -13s; top: 41vh; left: 46vw; } .star:nth-of-type(123) { animation-delay: -4s; top: 65vh; left: 87vw; } .star:nth-of-type(124) { animation-delay: -10s; top: 24vh; left: 79vw; } .star:nth-of-type(125) { animation-delay: -2s; top: 9vh; left: 81vw; } .star:nth-of-type(126) { animation-delay: -4s; top: 11vh; left: 77vw; } .star:nth-of-type(127) { animation-delay: -1s; top: 3vh; left: 98vw; } .star:nth-of-type(128) { animation-delay: -8s; top: 99vh; left: 80vw; } .star:nth-of-type(129) { animation-delay: -7s; top: 53vh; left: 21vw; } .star:nth-of-type(130) { animation-delay: -7s; top: 97vh; left: 7vw; } .star:nth-of-type(131) { animation-delay: -17s; top: 51vh; left: 91vw; } .star:nth-of-type(132) { animation-delay: -6s; top: 97vh; left: 77vw; } .star:nth-of-type(133) { animation-delay: -4s; top: 64vh; left: 81vw; } .star:nth-of-type(134) { animation-delay: -15s; top: 89vh; left: 48vw; } .star:nth-of-type(135) { animation-delay: -19s; top: 90vh; left: 31vw; } .star:nth-of-type(136) { animation-delay: -15s; top: 80vh; left: 70vw; } .star:nth-of-type(137) { animation-delay: -14s; top: 83vh; left: 28vw; } .star:nth-of-type(138) { animation-delay: -13s; top: 97vh; left: 57vw; } .star:nth-of-type(139) { animation-delay: -13s; top: 87vh; left: 75vw; } .star:nth-of-type(140) { animation-delay: -7s; top: 71vh; left: 15vw; } .star:nth-of-type(141) { animation-delay: -1s; top: 37vh; left: 57vw; } .star:nth-of-type(142) { animation-delay: -4s; top: 57vh; left: 64vw; } .star:nth-of-type(143) { animation-delay: -11s; top: 92vh; left: 60vw; } .star:nth-of-type(144) { animation-delay: -1s; top: 88vh; left: 55vw; } .star:nth-of-type(145) { animation-delay: -14s; top: 8vh; left: 25vw; } .star:nth-of-type(146) { animation-delay: -14s; top: 49vh; left: 16vw; } .star:nth-of-type(147) { animation-delay: -6s; top: 58vh; left: 16vw; } .star:nth-of-type(148) { animation-delay: -5s; top: 81vh; left: 94vw; } .star:nth-of-type(149) { animation-delay: -2s; top: 97vh; left: 28vw; } .star:nth-of-type(150) { animation-delay: -11s; top: 16vh; left: 70vw; } .star:nth-of-type(151) { animation-delay: -10s; top: 29vh; left: 8vw; } .star:nth-of-type(152) { animation-delay: -13s; top: 58vh; left: 58vw; } .star:nth-of-type(153) { animation-delay: -2s; top: 78vh; left: 93vw; } .star:nth-of-type(154) { animation-delay: -16s; top: 7vh; left: 33vw; } .star:nth-of-type(155) { animation-delay: -2s; top: 46vh; left: 89vw; } .star:nth-of-type(156) { animation-delay: -19s; top: 78vh; left: 24vw; } .star:nth-of-type(157) { animation-delay: -12s; top: 98vh; left: 83vw; } .star:nth-of-type(158) { animation-delay: -20s; top: 59vh; left: 56vw; } .star:nth-of-type(159) { animation-delay: -8s; top: 76vh; left: 28vw; } .star:nth-of-type(160) { animation-delay: -19s; top: 71vh; left: 25vw; } .star:nth-of-type(161) { animation-delay: -8s; top: 38vh; left: 83vw; } .star:nth-o.........完整代码请登录后点击上方下载按钮下载查看
网友评论0