div+css实现地心宇宙行星公转动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css实现地心宇宙行星公转动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
<style>
:root {
  --pov: 66deg;
  --bg-color: #111;
  --day-duration: 8s;
  --orbit-sphere-color: hsla(260, 80%, 60%, .6);
  --orbit-line-color: hsl(260 50% 70%);
  --orbit-line-thickness: .15rem;
  --orbit-plane-color: radial-gradient(
    circle at center,
    hsla(250, 70%, 75%, .05),
    hsla(250, 70%, 75%, .2)
  );
  --moon-orbit-size: 13dvmin;
  --mercury-orbit-size: 26dvmin;
  --venus-orbit-size: 39dvmin;
  --sun-orbit-size: 52dvmin;
  --mars-orbit-size: 65dvmin;
  --jupiter-orbit-size: 78dvmin;
  --saturn-orbit-size: 91dvmin;
}

body {
  height: 100dvh;
  margin: 0;
  background: var(--bg-color);
}

.universe {
  height: 100%;
  perspective: 50000px;
  translate: 0 -5%;
  position: relative;
}

/* orbit line */
.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size, 30dvmin);
  height: var(--size, 30dvmin);
  border-radius: 50%;
  background: var(--orbit-plane-color);
  box-shadow: 0 0 0 var(--orbit-line-thickness) var(--orbit-line-color);
  transform-style: preserve-3d;
  rotate: x var(--pov);
  translate: -50% -40%;
  opacity: 0;
  -webkit-animation: orbit-appear 1.5s var(--enter-delay, .1s) forwards;
          animation: orbit-appear 1.5s var(--enter-delay, .1s) forwards;
}

@-webkit-keyframes orbit-appear {
  to {
    opacity: 1;
    translate: -50% -50%;
  }
}

@keyframes orbit-appear {
  to {
    opacity: 1;
    translate: -50% -50%;
  }
}

/* orbit semi-sphere */
.orbit::after {
  --cutout: calc(var(--size) / 2 + var(--orbit-line-thickness));
  content: "";
  position: absolute;
  top: -75%;
  left: calc(-1 * var(--orbit-line-thickness));
  width: calc(100% + var(--orbit-line-thickness) * 2);
  height: 250%;
  background: radial-gradient(
    circle var(--cutout) at center,
    #0000 99.9%,
    var(--orbit-sphere-color)
  );
  border-radius: 50%;
  -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
          clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}

.orbit.moon {
  --size: var(--moon-orbit-size);
  --enter-delay: .1s;
}

.orbit.mercury {
  --size: var(--mercury-orbit-size);
  --enter-delay: .25s;
}

.orbit.venus {
  --size: var(--venus-orbit-size);
  --enter-delay: .4s;
}

.orbit.sun {
  --size: var(--sun-orbit-size);
  --enter-delay: .55s;
}

.orbit.mars {
  --size: var(--mars-orbit-size);
  --enter-delay: .7s;
}

.orbit.jupiter {
  --size: var(--jupiter-orbit-size);
  --enter-delay: .85s;
}

.orbit.saturn {
  --size: var(--saturn-orbit-size);
  --enter-delay: 1s;
}

.body, .body-container {
  --circle-delay: calc(var(--day-duration) / 3.97);
  --reveal-delay: 1s;
  content: "";
  position: absolute;
  left: calc(50% + var(--astronomical-unit));
  top: 0;
  opacity: 0;
  translate: -50% -50%;
  width: var(--size);
  height: var(--size);
  background: radial-gradient(
    circle at 33% 33%,
    var(--color-1, darkgray),
    var(--color-2, #333)
  );
  border-radius: 50%;
  -webkit-animation:
    body-reveal
      1.5s var(--reveal-delay) forwards,
    body-index
      var(--day-duration) -1s infinite,
    body-move-x
      var(--day-duration)
      calc(var(--variation-delay, 0s) + var(--reveal-delay))
      infinite ease-in-out,
    body-move-y
      var(--day-duration)
      calc(var(--variation-delay, 0s) + var(--reveal-delay) - var(--circle-delay))
      infinite ease-in-out;
          animation:
    body-reveal
      1.5s var(--reveal-delay) forwards,
    body-index
      var(--day-duration) -1s infinite,
    body-move-x
      var(--day-duration)
      calc(var(--variation-delay, 0s) + var(--reveal-delay))
      infinite ease-in-out,
    body-move-y
      var(--day-duration)
      calc(var(--variation-delay, 0s) + var(--reveal-delay) - var(--circle-delay))
      infinite ease-in-out;
}

@-webkit-keyframes body-reveal {
  to {
    top: calc(50% + var(--astronomical-unit) * cos(var(--pov)));
    opacity: 1;
  }
}

@keyframes body-reveal {
  to {
    top: calc(50% + var(--astronomical-unit) * cos(var(--pov)));
    opacity: 1;
  }
}


@-webkit-keyframes body-move-x {
  50% {
    left: calc(50% - var(--astronomical-unit));
  }
}


@keyframes body-move-x {
  50% {
    left: calc(50% - var(--astronomical-unit));
  }
}

@-webkit-keyframes body-move-y {
  50% {
    top: calc(50% - var(--astronomical-unit) * cos(var(--pov)));
  }
}

@keyframes body-move-y {
  50% {
    top: calc(50% - var(--astronomical-unit) * cos(var(--pov)));
  }
}

@-webkit-keyframes body-index {
  25%, 66% {
    z-index: var(--inverse-index);
  }
  67% {
    z-index: 0;
  }
}

@keyframes body-index {
  25%, 66% {
    z-index: var(--inverse-index);
  }
  67% {
    z-index: 0;
  }
}

.body.earth {
  --size: 4dvmin;
  --color-1: skyblue;
  --color-2: mediumblue;
  --astronomical.........完整代码请登录后点击上方下载按钮下载查看