纯css模拟有机生物微生物动画效果-html代码-BFW代码库

代码语言：html
所属分类：动画
下面为部分代码预览，完整代码请点击下载或在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: #8600ff;
}
.atom:nth-child(45) {
  -webkit-animation-delay: -1.32s;
          animation-delay: -1.32s;
}
.atom:nth-child(45):after {
  -webkit-transform: rotateX(316.8deg) translate(220px) scale(1.76);
          transform: rotateX(316.8deg) translate(220px) scale(1.76);
  border-color: #8800ff;
}
.atom:nth-child(46) {
  -webkit-animation-delay: -1.35s;
          animation-delay: -1.35s;
}
.atom:nth-child(46):after {
  -webkit-transform: rotateX(324deg) translate(225px) scale(1.8);
          transform: rotateX(324deg) translate(225px) scale(1.8);
  border-color: #8a00ff;
}
.atom:nth-child(47) {
  -webkit-animation-delay: -1.38s;
          animation-delay: -1.38s;
}
.atom:nth-child(47):after {
  -webkit-transform: rotateX(331.2deg) translate(230px) scale(1.84);
          transform: rotateX(331.2deg) translate(230px) scale(1.84);
  border-color: #8c00ff;
}
.atom:nth-child(48) {
  -webkit-animation-delay: -1.41s;
          animation-delay: -1.41s;
}
.atom:nth-child(48):after {
  -webkit-transform: rotateX(338.4deg) translate(235px) scale(1.88);
          transform: rotateX(338.4deg) translate(235px) scale(1.88);
  border-color: #8e00ff;
}
.atom:nth-child(49) {
  -webkit-animation-delay: -1.44s;
          animation-delay: -1.44s;
}
.atom:nth-child(49):after {
  -webkit-transform: rotateX(345.6deg) translate(240px) scale(1.92);
          transform: rotateX(345.6deg) translate(240px) scale(1.92);
  border-color: #9100ff;
}
.atom:nth-child(50) {
  -webkit-animation-delay: -1.47s;
          animation-delay: -1.47s;
}
.atom:nth-child(50):after {
  -webkit-transform: rotateX(352.8deg) translate(245px) scale(1.96);
          transform: rotateX(352.8deg) translate(245px) scale(1.96);
  border-color: #9300ff;
}
.atom:nth-child(51) {
  -webkit-animation-delay: -1.5s;
          animation-delay: -1.5s;
}
.atom:nth-child(51):after {
  -webkit-transform: rotateX(360deg) translate(250px) scale(2);
          transform: rotateX(360deg) translate(250px) scale(2);
  border-color: #9500ff;
}
.atom:nth-child(52) {
  -webkit-animation-delay: -1.53s;
          animation-delay: -1.53s;
}
.atom:nth-child(52):after {
  -webkit-transform: rotateX(367.2deg) translate(255px) scale(2.04);
          transform: rotateX(367.2deg) translate(255px) scale(2.04);
  border-color: #9700ff;
}
.atom:nth-child(53) {
  -webkit-animation-delay: -1.56s;
          animation-delay: -1.56s;
}
.atom:nth-child(53):after {
  -webkit-transform: rotateX(374.4deg) translate(260px) scale(2.08);
          transform: rotateX(374.4deg) translate(260px) scale(2.08);
  border-color: #9900ff;
}
.atom:nth-child(54) {
  -webkit-animation-delay: -1.59s;
          animation-delay: -1.59s;
}
.atom:nth-child(54):after {
  -webkit-transform: rotateX(381.6deg) translate(265px) scale(2.12);
          transform: rotateX(381.6deg) translate(265px) scale(2.12);
  border-color: #9b00ff;
}
.atom:nth-child(55) {
  -webkit-animation-delay: -1.62s;
          animation-delay: -1.62s;
}
.atom:nth-child(55):after {
  -webkit-transform: rotateX(388.8deg) translate(270px) scale(2.16);
          transform: rotateX(388.8deg) translate(270px) scale(2.16);
  border-color: #9d00ff;
}
.atom:nth-child(56) {
  -webkit-animation-delay: -1.65s;
          animation-delay: -1.65s;
}
.atom:nth-child(56):after {
  -webkit-transform: rotateX(396deg) translate(275px) scale(2.2);
          transform: rotateX(396deg) translate(275px) scale(2.2);
  border-color: #9f00ff;
}
.atom:nth-child(57) {
  -webkit-animation-delay: -1.68s;
          animation-delay: -1.68s;
}
.atom:nth-child(57):after {
  -webkit-transform: rotateX(403.2deg) translate(280px) scale(2.24);
          transform: rotateX(403.2deg) translate(280px) scale(2.24);
  border-color: #a200ff;
}
.atom:nth-child(58) {
  -webkit-animation-delay: -1.71s;
          animation-delay: -1.71s;
}
.atom:nth-child(58):after {
  -webkit-transform: rotateX(410.4deg) translate(285px) scale(2.28);
          transform: rotateX(410.4deg) translate(285px) scale(2.28);
  border-color: #a400ff;
}
.atom:nth-child(59) {
  -webkit-animation-delay: -1.74s;
          animation-delay: -1.74s;
}
.atom:nth-child(59):after {
  -webkit-transform: rotateX(417.6deg) translate(290px) scale(2.32);
          transform: rotateX(417.6deg) translate(290px) scale(2.32);
  border-color: #a600ff;
}
.atom:nth-child(60) {
  -webkit-animation-delay: -1.77s;
          animation-delay: -1.77s;
}
.atom:nth-child(60):after {
  -webkit-transform: rotateX(424.8deg) translate(295px) scale(2.36);
          transform: rotateX(424.8deg) translate(295px) scale(2.36);
  border-color: #a800ff;
}
.atom:nth-child(61) {
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
}
.atom:nth-child(61):after {
  -webkit-transform: rotateX(432deg) translate(300px) scale(2.4);
          transform: rotateX(432deg) translate(300px) scale(2.4);
  border-color: #aa00ff;
}
.atom:nth-child(62) {
  -webkit-animation-delay: -1.83s;
          animation-delay: -1.83s;
}
.atom:nth-child(62):after {
  -webkit-transform: rotateX(439.2deg) translate(305px) scale(2.44);
          transform: rotateX(439.2deg) translate(305px) scale(2.44);
  border-color: #ac00ff;
}
.atom:nth-child(63) {
  -webkit-animation-delay: -1.86s;
          animation-delay: -1.86s;
}
.atom:nth-child(63):after {
  -webkit-transform: rotateX(446.4deg) translate(310px) scale(2.48);
          transform: rotateX(446.4deg) translate(310px) scale(2.48);
  border-color: #ae00ff;
}
.atom:nth-child(64) {
  -webkit-animation-delay: -1.89s;
          animation-delay: -1.89s;
}
.atom:nth-child(64):after {
  -webkit-transform: rotateX(453.6deg) translate(315px) scale(2.52);
          transform: rotateX(453.6deg) translate(315px) scale(2.52);
  border-color: #b000ff;
}
.atom:nth-child(65) {
  -webkit-animation-delay: -1.92s;
          animation-delay: -1.92s;
}
.atom:nth-child(65):after {
  -webkit-transform: rotateX(460.8deg) translate(320px) scale(2.56);
          transform: rotateX(460.8deg) translate(320px) scale(2.56);
  border-color: #b300ff;
}
.atom:nth-child(66) {
  -webkit-animation-delay: -1.95s;
          animation-delay: -1.95s;
}
.atom:nth-child(66):after {
  -webkit-transform: rotateX(468deg) translate(325px) scale(2.6);
          transform: rotateX(468deg) translate(325px) scale(2.6);
  border-color: #b500ff;
}
.atom:nth-child(67) {
  -webkit-animation-delay: -1.98s;
          animation-delay: -1.98s;
}
.atom:nth-child(67):after {
  -webkit-transform: rotateX(475.2deg) translate(330px) scale(2.64);
          transform: rotateX(475.2deg) translate(330px) scale(2.64);
  border-color.........完整代码请登录后点击上方下载按钮下载查看