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

代码语言：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:nth-child(12):after {
  -webkit-transform: rotateX(79.2deg) translate(55px) scale(0.44);
          transform: rotateX(79.2deg) translate(55px) scale(0.44);
  border-color: #4200ff;
}
.atom:nth-child(13) {
  -webkit-animation-delay: -0.36s;
          animation-delay: -0.36s;
}
.atom:nth-child(13):after {
  -webkit-transform: rotateX(86.4deg) translate(60px) scale(0.48);
          transform: rotateX(86.4deg) translate(60px) scale(0.48);
  border-color: #4400ff;
}
.atom:nth-child(14) {
  -webkit-animation-delay: -0.39s;
          animation-delay: -0.39s;
}
.atom:nth-child(14):after {
  -webkit-transform: rotateX(93.6deg) translate(65px) scale(0.52);
          transform: rotateX(93.6deg) translate(65px) scale(0.52);
  border-color: #4600ff;
}
.atom:nth-child(15) {
  -webkit-animation-delay: -0.42s;
          animation-delay: -0.42s;
}
.atom:nth-child(15):after {
  -webkit-transform: rotateX(100.8deg) translate(70px) scale(0.56);
          transform: rotateX(100.8deg) translate(70px) scale(0.56);
  border-color: #4800ff;
}
.atom:nth-child(16) {
  -webkit-animation-delay: -0.45s;
          animation-delay: -0.45s;
}
.atom:nth-child(16):after {
  -webkit-transform: rotateX(108deg) translate(75px) scale(0.6);
          transform: rotateX(108deg) translate(75px) scale(0.6);
  border-color: #4a00ff;
}
.atom:nth-child(17) {
  -webkit-animation-delay: -0.48s;
          animation-delay: -0.48s;
}
.atom:nth-child(17):after {
  -webkit-transform: rotateX(115.2deg) translate(80px) scale(0.64);
          transform: rotateX(115.2deg) translate(80px) scale(0.64);
  border-color: #4d00ff;
}
.atom:nth-child(18) {
  -webkit-animation-delay: -0.51s;
          animation-delay: -0.51s;
}
.atom:nth-child(18):after {
  -webkit-transform: rotateX(122.4deg) translate(85px) scale(0.68);
          transform: rotateX(122.4deg) translate(85px) scale(0.68);
  border-color: #4f00ff;
}
.atom:nth-child(19) {
  -webkit-animation-delay: -0.54s;
          animation-delay: -0.54s;
}
.atom:nth-child(19):after {
  -webkit-transform: rotateX(129.6deg) translate(90px) scale(0.72);
          transform: rotateX(129.6deg) translate(90px) scale(0.72);
  border-color: #5100ff;
}
.atom:nth-child(20) {
  -webkit-animation-delay: -0.57s;
          animation-delay: -0.57s;
}
.atom:nth-child(20):after {
  -webkit-transform: rotateX(136.8deg) translate(95px) scale(0.76);
          transform: rotateX(136.8deg) translate(95px) scale(0.76);
  border-color: #5300ff;
}
.atom:nth-child(21) {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}
.atom:nth-child(21):after {
  -webkit-transform: rotateX(144deg) translate(100px) scale(0.8);
          transform: rotateX(144deg) translate(100px) scale(0.8);
  border-color: #5500ff;
}
.atom:nth-child(22) {
  -webkit-animation-delay: -0.63s;
          animation-delay: -0.63s;
}
.atom:nth-child(22):after {
  -webkit-transform: rotateX(151.2deg) translate(105px) scale(0.84);
          transform: rotateX(151.2deg) translate(105px) scale(0.84);
  border-color: #5700ff;
}
.atom:nth-child(23) {
  -webkit-animation-delay: -0.66s;
          animation-delay: -0.66s;
}
.atom:nth-child(23):after {
  -webkit-transform: rotateX(158.4deg) translate(110px) scale(0.88);
          transform: rotateX(158.4deg) translate(110px) scale(0.88);
  border-color: #5900ff;
}
.atom:nth-child(24) {
  -webkit-animation-delay: -0.69s;
          animation-delay: -0.69s;
}
.atom:nth-child(24):after {
  -webkit-transform: rotateX(165.6deg) translate(115px) scale(0.92);
          transform: rotateX(165.6deg) translate(115px) scale(0.92);
  border-color: #5b00ff;
}
.atom:nth-child(25) {
  -webkit-animation-delay: -0.72s;
          animation-delay: -0.72s;
}
.atom:nth-child(25):after {
  -webkit-transform: rotateX(172.8deg) translate(120px) scale(0.96);
          transform: rotateX(172.8deg) translate(120px) scale(0.96);
  border-color: #5e00ff;
}
.atom:nth-child(26) {
  -webkit-animation-delay: -0.75s;
          animation-delay: -0.75s;
}
.atom:nth-child(26):after {
  -webkit-transform: rotateX(180deg) translate(125px) scale(1);
          transform: rotateX(180deg) translate(125px) scale(1);
  border-color: #6000ff;
}
.atom:nth-child(27) {
  -webkit-animation-delay: -0.78s;
          animation-delay: -0.78s;
}
.atom:nth-child(27):after {
  -webkit-transform: rotateX(187.2deg) translate(130px) scale(1.04);
          transform: rotateX(187.2deg) translate(130px) scale(1.04);
  border-color: #6200ff;
}
.atom:nth-child(28) {
  -webkit-animation-delay: -0.81s;
          animation-delay: -0.81s;
}
.atom:nth-child(28):after {
  -webkit-transform: rotateX(194.4deg) translate(135px) scale(1.08);
          transform: rotateX(194.4deg) translate(135px) scale(1.08);
  border-color: #6400ff;
}
.atom:nth-child(29) {
  -webkit-animation-delay: -0.84s;
          animation-delay: -0.84s;
}
.atom:nth-child(29):after {
  -webkit-transform: rotateX(201.6deg) translate(140px) scale(1.12);
          transform: rotateX(201.6deg) translate(140px) scale(1.12);
  border-color: #6600ff;
}
.atom:nth-child(30) {
  -webkit-animation-delay: -0.87s;
          animation-delay: -0.87s;
}
.atom:nth-child(30):after {
  -webkit-transform: rotateX(208.8deg) translate(145px) scale(1.16);
          transform: rotateX(208.8deg) translate(145px) scale(1.16);
  border-color: #6800ff;
}
.atom:nth-child(31) {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
}
.atom:nth-child(31):after {
  -webkit-transform: rotateX(216deg) translate(150px) scale(1.2);
          transform: rotateX(216deg) translate(150px) scale(1.2);
  border-color: #6a00ff;
}
.atom:nth-child(32) {
  -webkit-animation-delay: -0.93s;
          animation-delay: -0.93s;
}
.atom:nth-child(32):after {
  -webkit-transform: rotateX(223.2deg) translate(155px) scale(1.24);
          transform: rotateX(223.2deg) translate(155px) scale(1.24);
  border-color: #6c00ff;
}
.atom:nth-child(33) {
  -webkit-animation-delay: -0.96s;
          animation-delay: -0.96s;
}
.atom:nth-child(33):after {
  -webkit-transform: rotateX(230.4deg) translate(160px) scale(1.28);
          transform: rotateX(230.4deg) translate(160px) scale(1.28);
  border-color: #6f00ff;
}
.atom:nth-child(34) {
  -webkit-animation-delay: -0.99s;
          animation-delay: -0.99s;
}
.atom:nth-child(34):after {
  -webkit-transform: rotateX(237.6deg) translate(165px) scale(1.32);
          transform: rotateX(237.6deg) translate(165px) scale(1.32);
  border-color: #7100ff;
}
.atom:nth-child(35) {
  -webkit-animation-delay: -1.02s;
          animation-delay: -1.02s;
}
.atom:nth-child(35):after {
  -webkit-transform: rotateX(244.8deg) translate(170px) scale(1.36);
          transform: rotateX(244.8deg) translate(170px) scale(1.36);
  border-color: #7300ff;
}
.atom:nth-child(36) {
  -webkit-animation-delay: -1.05s;
          animation-delay: -1.05s;
}
.atom:nth-child(36):after {
  -webkit-transform: rotateX(252deg) translate(175px) scale(1.4);
          transform: rotateX(252deg) translate(175px) scale(1.4);
  border-color: #7500ff;
}
.atom:nth-child(37) {
  -webkit-animation-delay: -1.08s;
          animation-delay: -1.08s;
}
.atom:nth-child(37):after {
  -webkit-transform: rotateX(259.2deg) translate(180px) scale(1.44);
          transform: rotateX(259.2deg) translate(180px) scale(1.44);
  border-color: #7700ff;
}
.atom:nth-child(38) {
  -webkit-animation-delay: -1.11s;
          animation-delay: -1.11s;
}
.atom:nth-child(38):after {
  -webkit-transform: rotateX(266.4deg) translate(185px) scale(1.48);
          transform: rotateX(266.4deg) translate(185px) scale(1.48);
  border-color: #7900ff;
}
.atom:nth-child(39) {
  -webkit-animation-delay: -1.14s;
          animation-delay: -1.14s;
}
.atom:nth-child(39):after {
  -webkit-transform: rotateX(273.6deg) translate(190px) scale(1.52);
          transform: rotateX(273.6deg) translate(190px) scale(1.52);
  border-color: #7b00ff;
}
.atom:nth-child(40) {
  -webkit-animation-delay: -1.17s;
          animation-delay: -1.17s;
}
.atom:nth-child(40):after {
  -webkit-transform: rotateX(280.8deg) translate(195px) scale(1.56);
          transform: rotateX(280.8deg) translate(195px) scale(1.56);
  border-color: #7d00ff;
}
.atom:nth-child(41) {
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
}
.atom:nth-child(41):after {
  -webkit-transform: rotateX(288deg) translate(200px) scale(1.6);
          transform: rotateX(288deg) translate(200px) scale(1.6);
  border-color: #8000ff;
}
.atom:nth-child(42) {
  -webkit-animation-delay: -1.23s;
          animation-delay: -1.23s;
}
.atom:nth-child(42):after {
  -webkit-transform: rotateX(295.2deg) translate(205px) scale(1.64);
          transform: rotateX(295.2deg) translate(205px) scale(1.64);
  border-color: #8200ff;
}
.atom:nth-child(43) {
  -webkit-animation-delay: -1.26s;
          animation-delay: -1.26s;
}
.atom:nth-child(43):after {
  -webkit-transform: rotateX(302.4deg) translate(210px) scale(1.68);
          transform: rotateX(302.4deg) translate(210px) scale(1.68);
  border-color: #8400ff;
}
.atom:nth-child(44) {
  -webkit-animation-delay: -1.29s;
          animation-delay: -1.29s;
}
.atom:nth-child(44):after {
  -webkit-transform: rotateX(309.6deg) translate(215px) scale(1.72);
          transform: rotateX(309.6deg) translate(215px) scale(1.72);
  border-color: #860.........完整代码请登录后点击上方下载按钮下载查看