css球体旋转模仿月球效果-html代码-BFW代码库

css球体旋转模仿月球效果

代码语言：html

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
*,
*:before,
*:after {
  box-sizing: border-box;
}

:root {
  --purple: rebeccapurple;
  --somon: #f4e2c8;
}

body {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  height: 100vh;
  background: var(--somon);
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.wrapper {
  max-width: 250px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto;
  grid-template-areas: ". . t-one . ." ". t-three-1 t-three-2 t-three-3 ." "five-1 five-2 five-3 five-4 five-5" ". b-three-1 b-three-2 b-three-3 ." ". . b-one . .";
  grid-gap: 5px;
  will-change: transform;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  background: -webkit-gradient(linear, left top, left bottom, from(var(--purple)), to(#331a4d));
  background: linear-gradient(var(--purple), #331a4d);
  position: relative;
  -webkit-animation: move 5s linear alternate infinite;
          animation: move 5s linear alternate infinite;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.circle:nth-child(1) {
  grid-area: t-one;
}
.circle:nth-child(2) {
  grid-area: t-three-1;
}
.circle:nth-child(3) {
  grid-area: t-three-2;
}
.circle:nth-child(4) {
  grid-area: t-three-3;
}
.circle:nth-child(5) {
  grid-area: five-1;
}
.circle:nth-child(6) {
  grid-area: five-2;
}
.circle:nth-child(7) {
  grid-area: five-3;
}
.circle:nth-child(8) {
  grid-area: five-4;
}
.circle:nth-child(9) {
  grid-area: five-5;
}
.circle:nth-child(10) {
  grid-area: b-three-1;
}
.circle:nth-child(11) {
  grid-area: b-three-2;
}
.circle:nth-child(12) {
  grid-area: b-three-3;
}
.circle:nth-child(13) {
  grid-area: b-one;
}
.circle:before {
  content: "";
  width: 100%;
  height: 100%;
  background: var(--somon);
  -webkit-animation: fill 5s linear alternate infinite;
          animation: fill 5s linear alternate infinite;
  position: absolute;
  border-radius: 50%;
  z-index: 1;
}
.circle:after {
  content: "";
  width: 50%;
  height: 100%;
  right: 0;
  background: var(--somon);
  position: absolute;
}

@-webkit-keyframes fill {
  49.9% {
    background: var(--somon);
  }
  50% {
    background: var(--purple);
    -webkit-transform: rotatey(90deg);
            transform: rotatey(90deg);
  }
  99.9% {
    background.........完整代码请登录后点击上方下载按钮下载查看