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-ch.........完整代码请登录后点击上方下载按钮下载查看