div+css实现黑洞螺旋动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：div+css实现黑洞螺旋动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
@charset "UTF-8";
html, body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #000;
  overflow: hidden;
  margin: 0;
}
body * {
  position: absolute;
  inset: 0;
  margin: auto;
}

.🌀:nth-child(2) {
  transform: scale(-1);
}
.🌀 .💥 {
  width: 600px;
  height: 100px;
  -webkit-animation: 6s 🌌 ease infinite;
          animation: 6s 🌌 ease infinite;
}
.🌀 .💥:nth-child(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.🌀 .💥:nth-child(1):after {
  transform: rotate(0deg) scaleX(0);
  border-color: #ffea00;
}
.🌀 .💥:nth-child(2) {
  -webkit-animation-delay: -0.02s;
          animation-delay: -0.02s;
}
.🌀 .💥:nth-child(2):after {
  transform: rotate(3.6deg) scaleX(0.01);
  border-color: #ffe800;
}
.🌀 .💥:nth-child(3) {
  -webkit-animation-delay: -0.04s;
          animation-delay: -0.04s;
}
.🌀 .💥:nth-child(3):after {
  transform: rotate(7.2deg) scaleX(0.02);
  border-color: #ffe600;
}
.🌀 .💥:nth-child(4) {
  -webkit-animation-delay: -0.06s;
          animation-delay: -0.06s;
}
.🌀 .💥:nth-child(4):after {
  transform: rotate(10.8deg) scaleX(0.03);
  border-color: #ffe300;
}
.🌀 .💥:nth-child(5) {
  -webkit-animation-delay: -0.08s;
          animation-delay: -0.08s;
}
.🌀 .💥:nth-child(5):after {
  transform: rotate(14.4deg) scaleX(0.04);
  border-color: #ffe100;
}
.🌀 .💥:nth-child(6) {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
}
.🌀 .💥:nth-child(6):after {
  transform: rotate(18deg) scaleX(0.05);
  border-color: #ffdf00;
}
.🌀 .💥:nth-child(7) {
  -webkit-animation-delay: -0.12s;
          animation-delay: -0.12s;
}
.🌀 .💥:nth-child(7):after {
  transform: rotate(21.6deg) scaleX(0.06);
  border-color: #ffdd00;
}
.🌀 .💥:nth-child(8) {
  -webkit-animation-delay: -0.14s;
          animation-delay: -0.14s;
}
.🌀 .💥:nth-child(8):after {
  transform: rotate(25.2deg) scaleX(0.07);
  border-color: #ffdb00;
}
.🌀 .💥:nth-child(9) {
  -webkit-animation-delay: -0.16s;
          animation-delay: -0.16s;
}
.🌀 .💥:nth-child(9):after {
  transform: rotate(28.8deg) scaleX(0.08);
  border-color: #ffd900;
}
.🌀 .💥:nth-child(10) {
  -webkit-animation-delay: -0.18s;
          animation-delay: -0.18s;
}
.🌀 .💥:nth-child(10):after {
  transform: rotate(32.4deg) scaleX(0.09);
  border-color: gold;
}
.🌀 .💥:nth-child(11) {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}
.🌀 .💥:nth-child(11):after {
  transform: rotate(36deg) scaleX(0.1);
  border-color: #ffd500;
}
.🌀 .💥:nth-child(12) {
  -webkit-animation-delay: -0.22s;
          animation-delay: -0.22s;
}
.🌀 .💥:nth-child(12):after {
  transform: rotate(39.6deg) scaleX(0.11);
  border-color: #ffd200;
}
.🌀 .💥:nth-child(13) {
  -webkit-animation-delay: -0.24s;
          animation-delay: -0.24s;
}
.🌀 .💥:nth-child(13):after {
  transform: rotate(43.2deg) scaleX(0.12);
  border-color: #ffd000;
}
.🌀 .💥:nth-child(14) {
  -webkit-animation-delay: -0.26s;
          animation-delay: -0.26s;
}
.🌀 .💥:nth-child(14):after {
  transform: rotate(46.8deg) scaleX(0.13);
  border-color: #ffce00;
}
.🌀 .💥:nth-child(15) {
  -webkit-animation-delay: -0.28s;
          animation-delay: -0.28s;
}
.🌀 .💥:nth-child(15):after {
  transform: rotate(50.4deg) scaleX(0.14);
  border-color: #ffcc00;
}
.🌀 .💥:nth-child(16) {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
.🌀 .💥:nth-child(16):after {
  transform: rotate(54deg) scaleX(0.15);
  border-color: #ffca00;
}
.🌀 .💥:nth-child(17) {
  -webkit-animation-delay: -0.32s;
          animation-delay: -0.32s;
}
.🌀 .💥:nth-child(17):after {
  transform: rotate(57.6deg) scaleX(0.16);
  border-color: #ffc800;
}
.🌀 .💥:nth-child(18) {
  -webkit-animation-delay: -0.34s;
          animation-delay: -0.34s;
}
.🌀 .💥:nth-child(18):after {
  transform: rotate(61.2deg) scaleX(0.17);
  border-color: #ffc600;
}
.🌀 .💥:nth-child(19) {
  -webkit-animation-delay: -0.36s;
          animation-delay: -0.36s;
}
.🌀 .💥:nth-child(19):after {
  transform: rotate(64.8deg) scaleX(0.18);
  border-color: #ffc400;
}
.🌀 .💥:nth-child(20) {
  -webkit-animation-delay: -0.38s;
          animation-delay: -0.38s;
}
.🌀 .💥:nth-child(20):after {
  transform: rotate(68.4deg) scaleX(0.19);
  border-color: #ffc100;
}
.🌀 .💥:nth-child(21) {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
.🌀 .💥:nth-child(21):after {
  transform: rotate(72deg) scaleX(0.2);
  border-color: #ffbf00;
}
.🌀 .💥:nth-child(22) {
  -webkit-animation-delay: -0.42s;
          animation-delay: -0.42s;
}
.🌀 .💥:nth-child(22):after {
  transform: rotate(75.6deg) scaleX(0.21);
  border-color: #ffbd00;
}
.🌀 .💥:nth-child(23) {
  -webkit-animation-delay: -0.44s;
          animation-delay: -0.44s;
}
.🌀 .💥:nth-child(23):after {
  transform: rotate(79.2deg) scaleX(0.22);
  border-color: #ffbb00;
}
.🌀 .💥:nth-child(24) {
  -webkit-animation-delay: -0.46s;
          animation-delay: -0.46s;
}
.🌀 .💥:nth-child(24):after {
  transform: rotate(82.8deg) scaleX(0.23);
  border-color: #ffb900;
}
.🌀 .💥:nth-child(25) {
  -webkit-animation-delay: -0.48s;
          animation-delay: -0.48s;
}
.🌀 .💥:nth-child(25):after {
  transform: rotate(86.4deg) scaleX(0.24);
  border-color: #ffb700;
}
.🌀 .💥:nth-child(26) {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}
.🌀 .💥:nth-child(26):after {
  transform: rotate(90deg) scaleX(0.25);
  border-color: #ffb500;
}
.🌀 .💥:nth-child(27) {
  -webkit-animation-delay: -0.52s;
          animation-delay: -0.52s;
}
.🌀 .💥:nth-child(27):after {
  transform: rotate(93.6deg) scaleX(0.26);
  border-color: #ffb300;
}
.🌀 .💥:nth-child(28) {
  -webkit-animation-delay: -0.54s;
          animation-delay: -0.54s;
}
.🌀 .💥:nth-child(28):after {
  transform: rotate(97.2deg) scaleX(0.27);
  border-color: #ffb000;
}
.🌀 .💥:nth-child(29) {
  -webkit-animation-delay: -0.56s;
          animation-delay: -0.56s;
}
.🌀 .💥:nth-child(29):after {
  transform: rotate(100.8deg) scaleX(0.28);
  border-color: #ffae00;
}
.🌀 .💥:nth-child(30) {
  -webkit-animation-delay: -0.58s;
          animation-delay: -0.58s;
}
.🌀 .💥:nth-child(30):after {
  transform: rotate(104.4deg) scaleX(0.29);
  border-color: #ffac00;
}
.🌀 .💥:nth-child(31) {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}
.🌀 .💥:nth-child(31):after {
  transform: rotate(108deg) scaleX(0.3);
  border-color: #ffaa00;
}
.🌀 .💥:nth-child(32) {
  -webkit-animation-delay: -0.62s;
          animation-delay: -0.62s;
}
.🌀 .💥:nth-child(32):after {
  transform: rotate(111.6deg) scaleX(0.31);
  border-color: #ffa800;
}
.🌀 .💥:nth-child(33) {
  -webkit-animation-delay: -0.64s;
          animation-delay: -0.64s;
}
.🌀 .💥:nth-child(33):after {
  transform: rotate(115.2deg) scaleX(0.32);
  border-color: #ffa600;
}
.🌀 .💥:nth-child(34) {
  -webkit-animation-delay: -0.66s;
          animation-delay: -0.66s;
}
.🌀 .💥:nth-child(34):after {
  transform: rotate(118.8deg) scaleX(0.33);
  border-color: #ffa400;
}
.🌀 .💥:nth-child(35) {
  -webkit-animation-delay: -0.68s;
          animation-delay: -0.68s;
}
.🌀 .💥:nth-child(35):after {
  transform: rotate(122.4deg) scaleX(0.34);
  border-color: #ffa200;
}
.🌀 .💥:nth-child(36) {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s;
}
.🌀 .💥:nth-child(36):after {
  transform: rotate(126deg) scaleX(0.35);
  border-color: #ff9f00;
}
.🌀 .💥:nth-child(37) {
  -webkit-animation-delay: -0.72s;
          animation-delay: -0.72s;
}
.🌀 .💥:nth-child(37):after {
  transform: rotate(129.6deg) scaleX(0.36);
  border-color: #ff9d00;
}
.🌀 .💥:nth-child(38) {
  -webkit-animation-delay: -0.74s;
          animation-delay: -0.74s;
}
.🌀 .💥:nth-child(38):after {
  transform: rotate(133.2deg) scaleX(0.37);
  border-color: #ff9b00;
}
.🌀 .💥:nth-child(39) {
  -webkit-animation-delay: -0.76s;
          animation-delay: -0.76s;
}
.🌀 .💥:nth-child(39):after {
  transform: rotate(136.8deg) scaleX(0.38);
  border-color: #ff9900;
}
.🌀 .💥:nth-child(40) {
  -webkit-animation-delay: -0.78s;
          animation-delay: -0.78s;
}
.🌀 .💥:nth-child(40):after {
  transform: rotate(140.4deg) scaleX(0.39);
  border-color: #ff9700;
}
.🌀 .💥:nth-child(41) {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
}
.🌀 .💥:nth-child(41):after {
  transform: rotate(144deg) scaleX(0.4);
  border-color: #ff9500;
}
.🌀 .💥:nth-child(42) {
  -webkit-animation-delay: -0.82s;
          animation-delay: -0.82s;
}
.🌀 .💥:nth-child(42):after {
  transform: rotate(147.6deg) scaleX(0.41);
  border-color: #ff9300;
}
.🌀 .💥:nth-child(43) {
  -webkit-animation-delay: -0.84s;
          animation-delay: -0.84s;
}
.🌀 .💥:nth-child(43):after {
  transform: rotate(151.2deg) scaleX(0.42);
  border-color: #ff9100;
}
.🌀 .💥:nth-child(44) {
  -webkit-animation-delay: -0.86s;
          animation-delay: -0.86s;
}
.🌀 .💥:nth-child(44):after {
  transform: rotate(154.8deg) scaleX(0.43);
  border-color: #ff8e00;
}
.🌀 .💥:nth-child(45) {
  -webkit-animation-delay: -0.88s;
          animation-delay: -0.88s;
}
.🌀 .💥:nth-child(45):after {
  transform: rotate(158.4deg) scaleX(0.44);
  border-color: darkorange;
}
.🌀 .💥:nth-child(46) {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
}
.🌀 .💥:nth-child(46):after {
  transform: rotate(162deg) scaleX(0.45);
  border-color: #ff8a00;
}
.🌀 .💥:nth-child(47) {
  -webkit-animation-delay: -0.92s;
          animation-delay: -0.92s;
}
.🌀 .💥:nth-child(47):after {
  transform: rotate(165.6deg) scaleX(0.46);
  border-color: #ff8800;
}
.🌀 .💥:nth-child(48) {
  -webkit-animation-delay: -0.94s;
          animation-delay: -0.94s;
}
.🌀 .💥:nth-child(48):after {
  transform: rotate(169.2deg) scaleX(0.47);
  border-color: #ff8600;
}
.🌀 .💥:nth-child(49) {
  -webkit-animation-delay: -0.96s;
          animation-delay: -0.96s;
}
.🌀 .💥:nth-child(49):after {
  transform: rotate(172.8deg) scaleX(0.48);
  border-color: #ff8400;
}
.🌀 .💥:nth-child(50) {
  -webkit-animation-delay: -0.98s;
          animation-delay: -0.98s;
}
.🌀 .💥:nth-child(50):after {
  transform: rotate(176.4deg) scaleX(0.49);
  border-color: #ff8200;
}
.🌀 .💥:nth-child(51) {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
.🌀 .💥:nth-child(51):after {
  transform: rotate(180deg) scaleX(0.5);
  border-color: #ff8000;
}
.🌀 .💥:nth-child(52) {
  -webkit-animation-delay: -1.02s;
          animation-delay: -1.02s;
}
.🌀 .💥:nth-child(52):after {
  transform: rotate(183.6deg) scaleX(0.51);
  border-color: #ff7d00;
}
.🌀 .💥:nth-child(53) {
  -webkit-animation-delay: -1.04s;
          animation-delay: -1.04s;
}
.🌀 .💥:nth-child(53):after {
  transform: rotate(187.2deg) scaleX(0.52);
  border-color: #ff7b00;
}
.🌀 .💥:nth-child(54) {
  -webkit-animation-delay: -1.06s;
          animation-delay: -1.06s;
}
.🌀 .💥:nth-child(54):after {
  transform: rotate(190.8deg) scaleX(0.53);
  border-color: #ff7900;
}
.🌀 .💥:nth-child(55) {
  -webkit-animation-delay: -1.08s;
          animation-delay: -1.08s;
}
.🌀 .💥:nth-child(55):after {
  transform: rotate(194.4deg) scaleX(0.54);
  border-color: #ff7700;
}
.🌀 .💥:nth-child(56) {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s;
}
.🌀 .💥:nth-child(56):after {
  transform: rotate(198deg) scaleX(0.55);
  border-color: #ff7500;
}
.🌀 .💥:nth-child(57) {
  -webkit-animation-delay: -1.12s;
          animation-delay: -1.12s;
}
.🌀 .💥:nth-child(57):after {
  transform: rotate(201.6deg) scaleX(0.56);
  border-color: #ff7300;
}
.🌀 .💥:nth-child(58) {
  -webkit-animation-delay: -1.14s;
          animation-delay: -1.14s;
}
.🌀 .💥:nth-child(58):after {
  transform: rotate(205.2deg) scaleX(0.57);
  border-color: #ff7100;
}
.🌀 .💥:nth-child(59) {
  -webkit-animation-delay: -1.16s;
          animation-delay: -1.16s;
}
.🌀 .💥:nth-child(59):after {
  transform: rotate(208.8deg) scaleX(0.58);
  border-color: #ff6f00;
}
.🌀 .💥:nth-child(60) {
  -webkit-animation-delay: -1.18s;
          animation-delay: -1.18s;
}
.🌀 .💥:nth-child(60):after {
  transform: rotate(212.4deg) scaleX(0.59);
  border-color: #ff6c00;
}
.🌀 .💥:nth-child(61) {
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
}
.🌀 .💥:nth-child(61):after {
  transform: rotate(216deg) scaleX(0.6);
  border-color: #ff6a00;
}
.🌀 .💥:nth-child(62) {
  -webkit-animation-delay: -1.22s;
          animation-delay: -1.22s;
}
.🌀 .💥:nth-child(62):after {
  transform: rotate(219.6deg) scaleX(0.61);
  border-color: #ff6800;
}
.🌀 .💥:nth-child(63) {
  -webkit-animation-delay: -1.24s;
          animation-delay: -1.24s;
}
.🌀 .💥:nth-child(63):after {
  transform: rotate(223.2deg) scaleX(0.62);
  border-color: #ff6600;
}
.🌀 .💥:nth-child(64) {
  -webkit-animation-delay: -1.26s;
          animation-delay: -1.26s;
}
.🌀 .💥:nth-child(64):after {
  transform: rotate(226.8deg) scaleX(0.63);
  border-color: #ff6400;
}
.🌀 .💥:nth-child(65) {
  -webkit-animation-delay: -1.28s;
          animation-delay: -1.28s;
}
.🌀 .💥:nth-child(65):after {
  transform: rotate(230.4deg) scaleX(0.64);
  border-color: #ff6200;
}
.🌀 .💥:nth-child(66) {
  -webkit-animation-delay: -1.3s;
          animation-delay: -1.3s;
}
.🌀 .💥:nth-child(66):after {
  transform: rotate(234deg) scaleX(0.65);
  border-color: #ff6000;
}
.🌀 .💥:nth-child(67) {
  -webkit-animation-delay: -1.32s;
          animation-delay: -1.32s;
}
.🌀 .💥:nth-child(67):after {
  transform: rotate(237.6deg) scaleX(0.66);
  border-color: #ff5e00;
}
.🌀 .💥:nth-child(68) {
  -webkit-animation-delay: -1.34s;
          animation-delay: -1.34s;
}
.🌀 .💥:nth-child(68):after {
  transform: rotate(241.2deg) scaleX(0.67);
  border-color: #ff5b00;
}
.🌀 .💥:nth-child(69) {
  -webkit-animation-delay: -1.36s;
          animation-delay: -1.36s;
}
.🌀 .💥:nth-child(69):after {
  transform: rotate(244.8deg) scaleX(0.68);
  border-color: #ff5900;
}
.🌀 .💥:nth-child(70) {
  -webkit-animation-delay: -1.38s;
          animation-delay: -1.38s;
}
.🌀 .💥:nth-child(70):after {
  transform: rotate(248.4deg) scaleX(0.69);
  border-color: #ff5700;
}
.🌀 .💥:nth-child(71) {
  -webkit-animation-delay: -1.4s;
          animation-delay: -1.4s;
}
.🌀 .💥:nth-child(71):after {
  transform: rotate(252deg) scaleX(0.7);
  border-color: #ff5500;
}
.🌀 .💥:nth-child(72) {
  -webkit-animation-delay: -1.42s;
          animation-delay: -1.42s;
}
.🌀 .💥:nth-child(72):after {
  transform: rotate(255.6deg) scaleX(0.71);
  border-color: #ff5300;
}
.🌀 .💥:nth-child(73) {
  -webkit-animation-delay: -1.44s;
          animation-delay: -1.44s;
}
.🌀 .💥:nth-child(73):after {
  transform: rotate(259.2deg) scaleX(0.72);
  border-color: #ff5100;
}
.🌀 .💥:nth-child(74) {
  -webkit-animation-delay: -1.46s;
          animation-delay: -1.46s;
}
.🌀 .💥:nth-child(74):after {
  transform: rotate(262.8deg) scaleX(0.73);
  border-color: #ff4f00;
}
.🌀 .💥:nth-child(75) {
  -webkit-animation-delay: -1.48s;
          animation-delay: -1.48s;
}
.🌀 .💥:nth-child(75):after {
  transform: rotate(266.4deg) scaleX(0.74);
  border-color: #ff4d00;
}
.🌀 .💥:nth-child(76) {
  -webkit-animation-delay: -1.5s;
          animation-delay: -1.5s;
}
.🌀 .💥:nth-child(76):after {
  transform: rotate(270deg) scaleX(0.75);
  border-color: #ff4a00;
}
.🌀 .💥:nth-child(77) {
  -webkit-animation-delay: -1.52s;
          animation-delay: -1.52s;
}
.🌀 .💥:nth-child(77):after {
  transform: rotate(273.6deg) scaleX(0.76);
  border-color: #ff4800;
}
.🌀 .💥:nth-child(78) {
  -webkit-animation-delay: -1.54s;
          animation-delay: -1.54s;
}
.🌀 .💥:nth-child(78):after {
  transform: rotate(277.2deg) scaleX(0.77);
  border-color: #ff4600;
}
.🌀 .💥:nth-child(79) {
  -webkit-animation-delay: -1.56s;
          animation-delay: -1.56s;
}
.🌀 .💥:nth-child(79):afte.........完整代码请登录后点击上方下载按钮下载查看