css+svg实现绚丽线条圈圈虚线运动背景动画效果代码-html代码-BFW代码库

css+svg实现绚丽线条圈圈虚线运动背景动画效果代码

代码语言：html

所属分类：背景

代码描述：css+svg实现绚丽线条圈圈虚线运动背景动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

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

<link rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/fonts/fnTypoPRODancingScriptRegular.css" />
    <style>

        body {
          background: linear-gradient(#3800e7, #8a15ff);
          height: 100vh;
          font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
font-family:'fnTypoPRODancingScriptRegular';
          font-weight: 300;
          overflow: hidden;
          color: white;
          text-align: center;
        }
        
        h1 {
          font-size: 3em;
          margin-bottom: 0.2em;
        }
        
        h2 {
          font-size: 2em;
        }
        
        .main {
          height: 100vh;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          position: relative;
          justify-content: center;
          align-items: center;
        }
        .main:before, .main:after {
          content: "";
          display: block;
          position: absolute;
          z-index: -3;
        }
        .main:before {
          right: 0;
          bottom: -19;
          height: 30em;
          width: 30em;
          border-radius: 30em;
          background: linear-gradient(#3800e7, #8a15ff);
          align-self: flex-end;
          -webkit-animation: gradient-fade 8s ease-in-out 3s infinite alternate;
                  animation: gradient-fade 8s ease-in-out 3s infinite alternate;
        }
        .main:after {
          top: 0;
          left: 30;
          height: 10em;
          width: 10em;
          border-radius: 10em;
          background: linear-gradient(#3800e7, #8a15ff);
          -webkit-animation: gradient-fade-alt 6s ease-in-out 3s infinite alternate;
                  animation: gradient-fade-alt 6s ease-in-out 3s i.........完整代码请登录后点击上方下载按钮下载查看