纯css模拟日食全过程带星星动画效果-html代码-BFW代码库

代码语言：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;
  l.........完整代码请登录后点击上方下载按钮下载查看