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

代码语言：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) scale(0.6);
}
moon c:nth-of-type(4):after {
  transform: translate3d(-75rem, 0, 0) rotateY(90deg) scale(0.4);
}
moon c:nth-of-type(5) {
  transform: rotate(53deg) rotateY(50deg);
}
moon c:nth-of-type(5):before, moon c:nth-of-type(5):after {
  animation-delay: -1.385s;
}
moon c:nth-of-type(5):before {
  transform: rotateY(-90deg) scale(0.8);
}
moon c:nth-of-type(5):after {
  transform: translate3d(-75rem, 0, 0) rotateY(90deg) scale(0.9);
}
moon c:nth-of-type(6) {
  transform: rotate(54deg) rotateY(60deg);
}
moon c:nth-of-type(6):before, moon c:nth-of-type(6):after {
  animation-delay: -1.662s;
}
moon c:nth-of-type(6):before {
  transform: rotateY(-90deg) scale(0.4);
}
moon c:nth-of-type(6):after {
  transform: translate3d(-75rem, 0, 0) rotateY(90deg) scale(0.2);
}
moon c:nth-of-type(7) {
  transform: rotate(37deg) rotateY(70deg);
}
moon c:nth-of-type(7):before, moon c:nth-of-type(7):after {
  animation-delay: -1.939s;
}
moon c:nth-of-type(7):before {
  transform: rotateY(-90deg) scale(0.7);
}
moon c:nth-of-type(7):after {
  transform: translate3d(-75rem, 0, 0) rotateY(90deg) scale(0.2);
}
moon c:nth-of-type(8) {
  transform: rotate(27deg) rotateY(80deg);
}
moon c:nth-of-type(8):before, moon c:nth-of-type(8):after {
  animation-delay: -2.216s;
}
moon c:nth-of-type(8):before {
  transform: rotateY(-90deg) scale(0.4);
}
moon c:nth-of-type(8):after {
  transform: translate3d(-75rem, 0, 0) rotateY(90deg) scale(0.4);
}
moon c:nth-of-type(9) {
  transform: rotate(19deg) rotateY(90deg);
}
moon c:nth-of-type(9):before, moon c:nth-of-type(9):after {
  animation-delay: -2.493s;
}
moon c:nth-of-type(9):before {
  transform: rotateY(-90deg) scale(0.8);
}
moon c:nth-of-type(9):after {
  transform: translate3d(-75rem, 0, 0) rotateY(90deg) scale(0.2);
}
moon c:nth-of-type(10) {
  transform: rotate(12deg) rotateY(100deg);
}
moon c:nth-of-type(10):before, moon c:nth-of-type(10):after {
  animation-delay: -2.77s;
}
moon c:nth-of-type(10):before {
  transform: rotateY(-90deg) scale(0.8);
}
moon c:nth-of-type(10):after {
  transform: translate3d(-75rem, 0, 0) rotateY(90deg) scale(1);
}
moon c:nth-of-type(11) {
  transform: rotate(56deg) rotateY(110deg);
}
moon c:nth-of-type(11):before, moon c:nth-of-type(11):after {
  animation-delay: -3.047s;
}
moon c:nth-of-type(11):before {
  transform: rotateY(-90deg) scale(0.5);
}
moon c:nth-of-type(11):after {
  transform: translate3d(-75rem, 0, 0) rotateY(90deg) scale(0.6);
}
moon c:nth-of-type(12) {
  transform: rotate(5deg) rotateY(120deg);
}
moon c:nth-of-type(12):before, moon c:nth-of-type(12):after {
  animation-delay: -3.324s;
}
moon c:nth-of-type(12):before {
  transform: rotateY(-90deg) scale(1);
}
moon c:nth-of-type(12):after {
  transform: translate3d(-75rem, 0, 0) rotateY(90deg) scale(1);
}
moon c:nth-of-type(13) {
  transform: rotate(55deg) rotateY(130deg);
}
moon c:nth-of-type(13):before, moon c:nth-of-type(13):after {
  animation-delay: -3.601s;
}
moon c:nth-of-type(13):before {
  transform: rotateY(-90deg) scale(0.3);
}
moon c:nth-of-type(13):after {
  transform: translate3d(-75rem, 0, 0) rotateY(90deg) scale(0.8);
}
moon c:nth-of-type(14) {
  transform: rotate(43deg) rotateY(140deg);
}
moon c:nth-of-type(14):before, moon c:nth-of-type(14):after {
  animation-delay: -3.878s;
}
moon c:nth-of-type(14):before {
  transform: rotateY(-90deg) scale(0.7);
}
moon c:nth-of-type(14):after {
  transform: translate3d(-75rem, 0, 0) rotateY(90deg) scale(0.9);
}
moon c:nth-of-type(15) {
  transform: rotate(54deg) rotateY(150deg);
}
moon c:nth-of-type(15):before, moon c:nth-of-type(15):after {
  animation-delay: -4.155s;
}
moon c:nth-of-type(15):before {
  transform: rotateY(-90deg) scale(0.4);
}
moon c:nth-of-type(15):after {
  transform: translate3d(-75rem, 0, 0) rotateY(90deg) scale(0.4);
}
moon c:nth-of-type(16) {
  transform: rotate(7deg) rotateY(160deg);
}
moon c:nth-of-type(16):before, moon c:nth-of-type(16):after {
  animation-delay: -4.432s;
}
moon c:nth-of-type(16):before {
  transform: rotateY(-90deg) scale(0.6);
}
moon c:nth-of-type(16):after {
  transform: translate3d(-75rem, 0, 0) rotateY(90deg) scale(0.2);
}
moon c:nth-of-type(17) {
  transform: rotate(3deg) rotateY(170deg);
}
moon c:nth-of-type(17):before, moon c:nth-of-type(17):after {
  animation-delay: -4.709s;
}
moon c:nth-of-type(17):before {
  transform: rotateY(-90deg) scale(0.5);
}
moon c:nth-of-type(17):after {
  transform: translate3d(-75rem, 0, 0) rotateY(90deg) scale(0.6);
}
moon c:nth-of-type(18) {
  transform: rotate(12deg) rotateY(180deg);
}
moon c:nth-of-type(18):before, moon c:nth-of-type(18):after {
  animation-delay: -4.986s;
}
moon c:nth-of-type(18):before {
  transform: rotateY(-90deg) scale(0.7);
}
moon c:nth-of-type(18):after {
  transform: translate3d(-75rem, 0, 0) rotateY(90deg) scale(0.6);
}
moon c:nth-of-type(19) {
  transform: rotate(30deg) rotateY(190deg);
}
moon c:nth-of-type(19):before, moon c:nth-of-type(19):after {
  animation-delay: -5.263s;
}
moon c:nth-of-type(19):before {
  transform: rotateY(-90deg) scale(0.3);
}
moon c:nth-of-type(19):after {
  transform: translate3d(-75rem, 0, 0) rotateY(90deg) scale(0.2);
}
moon c:nth-of-type(20) {
  transform: rotate(49deg) rotateY(200deg);
}
moon c:nth-of-type(20):before, moon c:nth-of-type(20):after {
  animation-delay: -5.54s;
}
moon c:nth-of-type(20):before {
  transform: ro.........完整代码请登录后点击上方下载按钮下载查看