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

代码语言：html

所属分类：动画

代码描述：css实现雾球旋转动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

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

html, body {
  width: 100%;
  min-height: 100%;
  font-size: 16px;
  line-height: 1.4rem;
  background-color: #181818;
}

.sphere {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 45vmin;
  height: 45vmin;
  animation: spinSphere 20s infinite linear;
  transform-style: preserve-3d;
}

[class^="ring"] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 45vmin;
  height: 45vmin;
  border-radius: 50%;
  overflow: hidden;
}

[class$="1"] {
  transform: rotateY(2deg) rotateX(2deg) rotateZ(3deg);
  box-shadow: 0 0 3px rgba(253, 169, 0, 0.1), inset 0 0 3px rgba(253, 169, 0, 0.1);
}

[class$="2"] {
  transform: rotateY(4deg) rotateX(4deg) rotateZ(6deg);
  box-shadow: 0 0 5px rgba(251, 169, 45, 0.1), inset 0 0 5px rgba(251, 169, 45, 0.1);
}

[class$="3"] {
  transform: rotateY(6deg) rotateX(6deg) rotateZ(9deg);
  box-shadow: 0 0 7px rgba(249, 168, 45, 0.1), inset 0 0 7px rgba(249, 168, 45, 0.1);
}

[class$="4"] {
  transform: rotateY(8deg) rotateX(8deg) rotateZ(12deg);
  box-shadow: 0 0 9px rgba(247, 168, 45, 0.1), inset 0 0 9px rgba(247, 168, 45, 0.1);
}

[class$="5"] {
  transform: rotateY(10deg) rotateX(10deg) rotateZ(15deg);
  box-shadow: 0 0 11px rgba(245, 167, 90, 0.1), inset 0 0 11px rgba(245, 167, 90, 0.1);
}

[class$="6"] {
  transform: rotateY(12deg) rotateX(12deg) rotateZ(18deg);
  box-shadow: 0 0 13px rgba(243, 167, 90, 0.1), inset 0 0 13px rgba(243, 167, 90, 0.1);
}

[class$="7"] {
  transform: rotateY(14deg) rotateX(14deg) rotateZ(21deg);
  box-shadow: 0 0 15px rgba(241, 166, 90, 0.1), inset 0 0 15px rgba(241, 166, 90, 0.1);
}

[class$="8"] {
  transform: rotateY(16deg) rotateX(16deg) rotateZ(24deg);
  box-shadow: 0 0 17px rgba(239, 166, 135, 0.1), inset 0 0 17px rgba(239, 166, 135, 0.1);
}

[class$="9"] {
  transform: rotateY(18deg) rotateX(18deg) rotateZ(27deg);
  box-shadow: 0 0 19px rgba(237, 165, 135, 0.1), inset 0 0 19px rgba(237, 165, 135, 0.1);
}

[class$="10"] {
  transform: rotateY(20deg) rotateX(20deg) rotateZ(30deg);
  box-shadow: 0 0 21px rgba(235, 165, 135, 0.1), inset 0 0 21px rgba(235, 165, 135, 0.1);
}

[class$="11"] {
  transform: rotateY(22deg) rotateX(22deg) rotateZ(33deg);
  box-shadow: 0 0 23px rgba(233, 164, 180, 0.1), inset 0 0 23px rgba(233, 164, 180, 0.1);
}

[class$="12"] {
  transform: rotateY(24deg) rotateX(24deg) rotateZ(36deg);
  box-shadow: 0 0 25px rgba(231, 164, 180, 0.1), inset 0 0 25px rgba(231, 164, 180, 0.1);
}

[class$="13"] {
  transform: rotateY(26deg) rotateX(26deg) rotateZ(39deg);
  box-shadow: 0 0 27px rgba(229, 163, 180, 0.1), inset 0 0 27px rgba(229, 163, 180, 0.1);
}

[class$="14"] {
  transform: rotateY(28deg) rotateX(28deg) rotateZ(42deg);
  box-shadow: 0 0 29px rgba(227, 163, 225, 0.1), inset 0 0 29px rgba(227, 163, 225, 0.1);
}

[class$="15"] {
  transform: rotateY(30deg) rotateX(30deg) rotateZ(45deg);
  box-shadow: 0 0 31px rgba(225, 162, 225, 0.1), inset 0 0 31px rgba(225, 162, 225, 0.1);
}

[class$="16"] {
  transform: rotateY(32deg) rotateX(32deg) rotateZ(48deg);
  box-shadow: 0 0 33px rgba(223, 162, 225, 0.1), inset 0 0 33px rgba(223, 162, 225, 0.1);
}

[class$="17"] {
  transform: rotateY(34deg) rotateX(34deg) rotateZ(51deg);
  box-shadow: 0 0 35px rgba(221, 161, 255, 0.1), inset 0 0 35px rgba(221, 161, 255, 0.1);
}

[class$="18"] {
  transform: rotateY(36deg) rotateX(36deg) rotateZ(54deg);
  box-shadow: 0 0 37px rgba(219, 161, 255, 0.1), inset 0 0 37px rgba(219, 161, 255, 0.1);
}

[class$="19"] {
  transform: rotateY(38deg) rotateX(38deg) rotateZ(57deg);
  box-shadow: 0 0 39px rgba(217, 160, 255, 0.1), inset 0 0 39px rgba(217, 160, 255, 0.1);
}

[class$="20"] {
  transform: rotateY(40deg) rotateX(40deg) rotateZ(60deg);
  box-shadow: 0 0 41px rgba(215, 160, 255, 0.1), inset 0 0 41px rgba(215, 160, 255, 0.1);
}

[class$="21"] {
  transform: rotateY(42deg) rotateX(42deg) rotateZ(63deg);
  box-shadow: 0 0 43px rgba(213, 159, 255, 0.1), inset 0 0 43px rgba(213, 159, 255, 0.1);
}

[class$="22"] {
  transform: rotateY(44deg) rotateX(44deg) rotateZ(66deg);
  box-shadow: 0 0 45px rgba(211, 159, 255, 0.1), inset 0 0 45px rgba(211, 159, 255, 0.1);
}

[class$="23.........完整代码请登录后点击上方下载按钮下载查看