div+css实现绚丽css3飘动动画效果代码-html代码-BFW代码库

div+css实现绚丽css3飘动动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现绚丽css3飘动动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
 <style>
     html, body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #140032;
  overflow: hidden;
  margin: 0;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
body *, body *:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 50%;
}

.organism:first-child {
  -webkit-transform: scale(-1, -1);
          transform: scale(-1, -1);
}

.atom {
  width: 100px;
  height: 100px;
  -webkit-animation: life 3s ease-in-out infinite;
          animation: life 3s ease-in-out infinite;
}
.atom:after {
  content: "";
  width: inherit;
  height: inherit;
  border-bottom: 2px dotted transparent;
}
.atom:nth-child(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.atom:nth-child(1):after {
  -webkit-transform: rotateX(0deg) translate(0px) scale(0);
          transform: rotateX(0deg) translate(0px) scale(0);
  border-color: #2b00ff;
}
.atom:nth-child(2) {
  -webkit-animation-delay: -0.03s;
          animation-delay: -0.03s;
}
.atom:nth-child(2):after {
  -webkit-transform: rotateX(7.2deg) translate(5px) scale(0.04);
          transform: rotateX(7.2deg) translate(5px) scale(0.04);
  border-color: #2d00ff;
}
.atom:nth-child(3) {
  -webkit-animation-delay: -0.06s;
          animation-delay: -0.06s;
}
.atom:nth-child(3):after {
  -webkit-transform: rotateX(14.4deg) translate(10px) scale(0.08);
          transform: rotateX(14.4deg) translate(10px) scale(0.08);
  border-color: #2f00ff;
}
.atom:nth-child(4) {
  -webkit-animation-delay: -0.09s;
          animation-delay: -0.09s;
}
.atom:nth-child(4):after {
  -webkit-transform: rotateX(21.6deg) translate(15px) scale(0.12);
          transform: rotateX(21.6deg) translate(15px) scale(0.12);
  border-color: #3100ff;
}
.atom:nth-child(5) {
  -webkit-animation-delay: -0.12s;
          animation-delay: -0.12s;
}
.atom:nth-child(5):after {
  -webkit-transform: rotateX(28.8deg) translate(20px) scale(0.16);
          transform: rotateX(28.8deg) translate(20px) scale(0.16);
  border-color: #3300ff;
}
.atom:nth-child(6) {
  -webkit-animation-delay: -0.15s;
          animation-delay: -0.15s;
}
.atom:nth-child(6):after {
  -webkit-transform: rotateX(36deg) translate(25px) scale(0.2);
          transform: rotateX(36deg) translate(25px) scale(0.2);
  border-color: #3500ff;
}
.atom:nth-child(7) {
  -webkit-animation-delay: -0.18s;
          animation-delay: -0.18s;
}
.atom:nth-child(7):after {
  -webkit-transform: rotateX(43.2deg) translate(30px) scale(0.24);
          transform: rotateX(43.2deg) translate(30px) scale(0.24);
  border-color: #3700ff;
}
.atom:nth-child(8) {
  -webkit-animation-delay: -0.21s;
          animation-delay: -0.21s;
}
.atom:nth-child(8):after {
  -webkit-transform: rotateX(50.4deg) translate(35px) scale(0.28);
          transform: rotateX(50.4deg) translate(35px) scale(0.28);
  border-color: #3900ff;
}
.atom:nth-child(9) {
  -webkit-animation-delay: -0.24s;
          animation-delay: -0.24s;
}
.atom:nth-child(9):after {
  -webkit-transform: rotateX(57.6deg) translate(40px) scale(0.32);
          transform: rotateX(57.6deg) translate(40px) scale(0.32);
  border-color: #3c00ff;
}
.atom:nth-child(10) {
  -webkit-animation-delay: -0.27s;
          animation-delay: -0.27s;
}
.atom:nth-child(10):after {
  -webkit-transform: rotateX(64.8deg) translate(45px) scale(0.36);
          transform: rotateX(64.8deg) translate(45px) scale(0.36);
  border-color: #3e00ff;
}
.atom:nth-child(11) {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
.atom:nth-child(11):after {
  -webkit-transform: rotateX(72deg) translate(50px) scale(0.4);
          transform: rotateX(72deg) translate(50px) scale(0.4);
  border-color: #4000ff;
}
.atom:nth-child(12) {
  -webkit-animation-delay: -0.33s;
          animation-delay: -0.33s;
}
.atom.........完整代码请登录后点击上方下载按钮下载查看