纯css实现幽灵球体旋转动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：纯css实现幽灵球体旋转动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
<style>
html, body {
  height: 100%;
}

body {
  background: black;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}

.b {
  -webkit-animation: spin 7s linear infinite;
          animation: spin 7s linear infinite;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.b, .c {
  height: 220px;
  width: 220px;
}

.c {
  border: 1px solid #F06;
  border-radius: 99em;
  position: absolute;
}
.c:nth-child(1) {
  border-color: #F06;
  -webkit-animation: spin 7.2s linear 0.04s infinite;
          animation: spin 7.2s linear 0.04s infinite;
  opacity: 0.006;
}
.c:nth-child(2) {
  border-color: #ff0048;
  -webkit-animation: spin 7.2s linear 0.08s infinite;
          animation: spin 7.2s linear 0.08s infinite;
  opacity: 0.012;
}
.c:nth-child(3) {
  border-color: #ff002b;
  -webkit-animation: spin 7.2s linear 0.12s infinite;
          animation: spin 7.2s linear 0.12s infinite;
  opacity: 0.018;
}
.c:nth-child(4) {
  border-color: #ff000d;
  -webkit-animation: spin 7.2s linear 0.16s infinite;
          animation: spin 7.2s linear 0.16s infinite;
  opacity: 0.024;
}
.c:nth-child(5) {
  border-color: #ff1100;
  -webkit-animation: spin 7.2s linear 0.2s infinite;
          animation: spin 7.2s linear 0.2s infinite;
  opacity: 0.03;
}
.c:nth-child(6) {
  border-color: #ff2f00;
  -webkit-animation: spin 7.2s linear 0.24s infinite;
          animation: spin 7.2s linear 0.24s infinite;
  opacity: 0.036;
}
.c:nth-child(7) {
  border-color: #ff4d00;
  -webkit-animation: spin 7.2s linear 0.28s infinite;
          animation: spin 7.2s linear 0.28s infinite;
  opacity: 0.042;
}
.c:nth-child(8) {
  border-color: #ff6a00;
  -webkit-animation: spin 7.2s linear 0.32s infinite;
          animation: spin 7.2s linear 0.32s infinite;
  opacity: 0.048;
}
.c:nth-child(9) {
  border-color: #ff8800;
  -webkit-animation: spin 7.2s linear 0.36s infinite;
          animation: spin 7.2s linear 0.36s infinite;
  opacity: 0.054;
}
.c:nth-child(10) {
  border-color: #ffa600;
  -webkit-animation: spin 7.2s linear 0.4s infinite;
          animation: spin 7.2s linear 0.4s infinite;
  opacity: 0.06;
}
.c:nth-child(11) {
  border-color: #ffc400;
  -webkit-animation: spin 7.2s linear 0.44s infinite;
          animation: spin 7.2s linear 0.44s infinite;
  opacity: 0.066;
}
.c:nth-child(12) {
  border-color: #ffe100;
  -webkit-animation: spin 7.2s linear 0.48s infinite;
          animation: spin 7.2s linear 0.48s infinite;
  opacity: 0.072;
}
.c:nth-child(13) {
  border-color: yellow;
  -webkit-animation: spin 7.2s linear 0.52s infinite;
          animation: spin 7.2s linear 0.52s infinite;
  opacity: 0.078;
}
.c:nth-child(14) {
  border-color: #e1ff00;
  -webkit-animation: spin 7.2s linear 0.56s infinite;
          animation: spin 7.2s linear 0.56s infinite;
  opacity: 0.084;
}
.c:nth-child(15) {
  border-color: #c4ff00;
  -webkit-animation: spin 7.2s linear 0.6s infinite;
          animation: spin 7.2s linear 0.6s infinite;
  opacity: 0.09;
}
.c:nth-child(16) {
  border-color: #a6ff00;
  -webkit-animation: spin 7.2s linear 0.64s infinite;
          animation: spin 7.2s linear 0.64s infinite;
  opacity: 0.096;
}
.c:nth-child(17) {
  border-color: #88ff00;
  -webkit-animation: spin 7.2s linear 0.68s infinite;
          animation: spin 7.2s linear 0.68s infinite;
  opacity: 0.102;
}
.c:nth-child(18) {
  border-color: #6aff00;
  -webkit-animation: spin 7.2s linear 0.72s infinite;
          animation: spin 7.2s linear 0.72s infinite;
  opacity: 0.108;
}
.c:nth-child(19) {
  border-color: #4dff00;
  -webkit-animation: spin 7.2s linear 0.76s infinite;
          animation: spin 7.2s linear 0.76s infinite;
  opacity: 0.114;
}
.c:nth-child(20) {
  border-color: #2fff00;
  -webkit-animation: spin 7.2s linear 0.8s infinite;
          animation: spin 7.2s linear 0.8s infinite;
  opacity: 0.12;
}
.c:nth-child(21) {
  border-color: #11ff00;
  -webkit-animation: spin 7.2s linear 0.84s infinite;
          animation: spin 7.2s linear 0.84s infinite;
  opacity: 0.126;
}
.c:nth-child(22) {
  border-color: #00ff0d;
  -webkit-animation: spin 7.2s linear 0.88s infinite;
          animation: spin 7.2s linear 0.88s infinite;
  opacity: 0.132;
}
.c:nth-child(23) {
  border-color: #00ff2b;
  -webkit-animation: spin 7.2s linear 0.92s infinite;
          animation: spin 7.2s linear 0.92s infinite;
  opacity: 0.138;
}
.c:nth-child(24) {
  border-color: #00ff48;
  -webkit-animation: spin 7.2s linear 0.96s infinite;
          animation: spin 7.2s linear 0.96s infinite;
  opacity: 0.144;
}
.c:nth-child(25) {
  border-color: #00ff66;
  -webkit-animation: spin 7.2s linear 1s infinite;
          animation: spin 7.2s linear 1s infinite;
  opacity: 0.15;
}
.c:nth-child(26) {
  border-color: #00ff84;
  -webkit-animation: spin 7.2s linear 1.04s infinite;
          animation: spin 7.2s linear 1.04s infinite;
  opacity: 0.156;
}
.c:nth-child(27) {
  border-color: #00ffa2;
  -webkit-animation: spin 7.2s linear 1.08s infinite;
          animation: spin 7.2s linear 1.08s infinite;
  opacity: 0.162;
}
.c:nth-child(28) {
  border-color: #00ffbf;
  -webkit-animation: spin 7.2s linear 1.12s infinite;
          animation: spin 7.2s linear 1.12s infinite;
  opacity: 0.168;
}
.c:nth-child.........完整代码请登录后点击上方下载按钮下载查看