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

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

代码语言：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;
    }
    .🔥:.........完整代码请登录后点击上方下载按钮下载查看