div+css实现月球旋转动画效果代码-html代码-BFW代码库

div+css实现月球旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现月球旋转动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>
html,
body,
div {
  height: 100%;
}

html {
  font-size: 1vmin;
  background: #000;
}

body {
  margin: auto;
  overflow: hidden;
}

div {
  transform-style: preserve-3d;
  perspective: 100em;
  position: relative;
}
div *,
div *:before,
div *:after, div:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
div:after {
  width: 50rem;
  height: 50rem;
  background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0), #000, rgba(0, 0, 0, 0.7));
  transform: translate3d(0, 0, 40rem);
  margin: auto;
  bottom: 0;
  right: 0;
}

moon {
  margin: auto;
  inset: 0;
  width: 81rem;
  height: 81rem;
  background: #cccccc;
  border-radius: 50%;
  animation: wobble 2s linear infinite;
}
moon spin {
  animation: r 10s linear infinite;
  width: 80rem;
  height: 0;
  margin: auto;
  inset: 0;
}
moon c {
  width: 80rem;
  height: 1rem;
  z-index: 1;
  font-size: 5rem;
}
moon c:before, moon c:after {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  transform: rotateY(-90deg);
  background: rgba(0, 0, 0, 0.05);
  animation: light 10s linear infinite;
  opacity: 0.75;
  border: 0.2rem dashed rgba(255, 255, 255, 0);
}
moon c:after {
  background: #fff;
}
moon c:nth-of-type(1) {
  transform: rotate(22deg) rotateY(10deg);
}
moon c:nth-of-type(1):before, moon c:nth-of-type(1):after {
  animation-delay: -0.277s;
}
moon c:nth-of-type(1):before {
  transform: rotateY(-90deg) scale(0.5);
}
moon c:nth-of-type(1):after {
  transform: translate3d(-75rem, 0, 0) rotateY(90deg) scale(0.4);
}
moon c:nth-of-type(2) {
  transform: rotate(47deg) rotateY(20deg);
}
moon c:nth-of-type(2):before, moon c:nth-of-type(2):after {
  animation-delay: -0.554s;
}
moon c:nth-of-type(2):before {
  transform: rotateY(-90deg) scale(0.5);
}
moon c:nth-of-type(2):after {
  transform: translate3d(-75rem, 0, 0) rotateY(90deg) scale(0.3);
}
moon c:nth-of-type(3) {
  transform: rotate(8deg) rotateY(30deg);
}
moon c:nth-of-type(3):before, moon c:nth-of-type(3):after {
  animation-delay: -0.831s;
}
moon c:nth-of-type(3):before {
  transform: rotateY(-90deg) scale(1);
}
moon c:nth-of-type(3):after {
  transform: translate3d(-75rem, 0, 0) rotateY(90deg) scale(0.3);
}
moon c:nth-of-type(4) {
  transform: rotate(47deg) rotateY(40deg);
}
moon c:nth-of-type(4):before, moon c:nth-of-type(4):after {
  animation-delay: -1.108s;
}
moon c:nth-of-type(4):before {
  transform: rotateY(-90deg) scal.........完整代码请登录后点击上方下载按钮下载查看