css实现炫酷曲线交织背景动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：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: #140032;
      overflow: hidden;
      margin: 0;
    }
    body *, body *:after {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      border-radius: 50%;
      -webkit-perspective: 1000px;
              perspective: 1000px;
      -webkit-perspective-origin: 100% 200%;
              perspective-origin: 100% 200%;
    }
    
    .💣:nth-child(1) {
      -webkit-transform: scale(-1, 1);
              transform: scale(-1, 1);
    }
    
    .💣:nth-child(2) {
      -webkit-transform: scale(1, -1);
              transform: scale(1, -1);
    }
    
    .💣:nth-child(3) {
      -webkit-transform: scale(-1, -1);
              transform: scale(-1, -1);
    }
    
    .🔥 {
      width: 150px;
      height: 150px;
      -webkit-animation: 🔥 2s ease-in-out infinite;
              animation: 🔥 2s ease-in-out infinite;
    }
    .🔥:after {
      content: "";
      border-top: 6px dotted transparent;
    }
    .🔥:nth-child(1) {
      -webkit-animation-delay: 0s;
              animation-delay: 0s;
    }
    .🔥:nth-child(1):after {
      -webkit-transform: rotateX(0deg) translate(0px) scaleX(0);
              transform: rotateX(0deg) translate(0px) scaleX(0);
      border-color: #2b00ff;
    }
    .🔥:nth-child(2) {
      -webkit-animation-delay: -0.04s;
              animation-delay: -0.04s;
    }
    .🔥:nth-child(2):after {
      -webkit-transform: rotateX(7.2deg) translate(6px) scaleX(0.02);
              transform: rotateX(7.2deg) translate(6px) scaleX(0.02);
      border-color: #2f00ff;
    }
    .🔥:nth-child(3) {
      -webkit-animation-delay: -0.08s;
              animation-delay: -0.08s;
    }
    .🔥:nth-child(3):after {
      -webkit-transform: rotateX(14.4deg) translate(12px) scaleX(0.04);
              transform: rotateX(14.4deg) translate(12px) scaleX(0.04);
      border-color: #3300ff;
    }
    .🔥:nth-child(4) {
      -webkit-animation-delay: -0.12s;
              animation-delay: -0.12s;
    }
    .🔥:nth-child(4):after {
      -webkit-transform: rotateX(21.6deg) translate(18px) scaleX(0.06);
              transform: rotateX(21.6deg) translate(18px) scaleX(0.06);
      border-color: #3700ff;
    }
    .🔥:nth-child(5) {
      -webkit-animation-delay: -0.16s;
              animation-delay: -0.16s;
    }
    .🔥:nth-child(5):after {
      -webkit-transform: rotateX(28.8deg) translate(24px) scaleX(0.08);
              transform: rotateX(28.8deg) translate(24px) scaleX(0.08);
      border-color: #3c00ff;
    }
    .🔥:nth-child(6) {
      -webkit-animation-delay: -0.2s;
              animation-delay: -0.2s;
    }
    .🔥:nth-child(6):after {
      -webkit-transform: rotateX(36deg) translate(30px) scaleX(0.1);
              transform: rotateX(36deg) translate(30px) scaleX(0.1);
      border-color: #4000ff;
    }
    .🔥:nth-child(7) {
      -webkit-animation-delay: -0.24s;
              animation-delay: -0.24s;
    }
    .🔥:nth-child(7):after {
      -webkit-transform: rotateX(43.2deg) translate(36px) scaleX(0.12);
              transform: rotateX(43.2deg) translate(36px) scaleX(0.12);
      border-color: #4400ff;
    }
    .🔥:nth-child(8) {
      -webkit-animation-delay: -0.28s;
              animation-delay: -0.28s;
    }
    .🔥:nth-child(8):after {
      -webkit-transform: rotateX(50.4deg) translate(42px) scaleX(0.14);
              transform: rotateX(50.4deg) translate(42px) scaleX(0.14);
      border-color: #4800ff;
    }
    .🔥:nth-child(9) {
      -webkit-animation-delay: -0.32s;
              animation-delay: -0.32s;
    }
    .🔥:nth-child(9):after {
      -webkit-transform: rotateX(57.6deg) translate(48px) scaleX(0.16);
              transform: rotateX(57.6deg) translate(48px) scaleX(0.16);
      border-color: #4d00ff;
    }
    .🔥:nth-child(10) {
      -webkit-animation-delay: -0.36s;
              animation-delay: -0.36s;
    }
    .🔥:nth-child(10):after {
      -webkit-transform: rotateX(64.8deg) translate(54px) scaleX(0.18);
              transform: rotateX(64.8deg) translate(54px) scaleX(0.18);
      border-color: #5100ff;
    }
    .🔥:nth-child(11) {
      -webkit-animation-delay: -0.4s;
              animation-delay: -0.4s;
    }
    .🔥:nth-child(11):after {
      -webkit-transform: rotateX(72deg) translate(60px) scaleX(0.2);
              transform: rotateX(72deg) translate(60px) scaleX(0.2);
      border-color: #5500ff;
    }
    .🔥:nth-child(12) {
      -webkit-animation-delay: -0.44s;
              animation-delay: -0.44s;
    }
    .🔥:nth-child(12):after {
      -webkit-transform: rotateX(79.2deg) translate(6.........完整代码请登录后点击上方下载按钮下载查看