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

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

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