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

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

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