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

代码语言：html

所属分类：背景

代码描述：svg+css实现圆圈线条背景动画效果代码

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

<html>

<head>
    <style>
        @import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;1,500&display=swap");
        body {
          background: linear-gradient(#3800e7, #8a15ff);
          height: 100vh;
          font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
          font-family: "DM Mono", monospace;
          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 infinite alternate;
        }
        .main__text-wrapper {
          position: relative;
          padding: 2em;
        }
        .main__text-wrapper:before, .main__text-wrapper:after {
          content: "";
          display: block;
          position: absolute;
        }
        .main__text-wrapper:before {
          z-index: -1;
          top: -3em;
          right: -3em;
          width: 13em;
          height: 13em;
          opacity: 0.7;
          border-radius: 13em;
          background: linear-gradient(#15e0ff, #8a15ff);
          -webkit-animation: rotation 7s linear infinite;
                  animation: rotation 7s linear infinite;
        }
        .main__text-wrapper:after {
          z-index: -1;
          bottom: -20em;
          width: 20em;
          height: 20em;
          border-radius: 20em;
          background: linear-gradient(#d000c5, #8a15ff);
          -webkit-animation: rotation 7s linear infinite;
                  animation: rotation 7s linear infinite;
        }
        
        .arrow {
          z-index: 1000;
          opacity: 0.5;
          position: absolute;
        }
        .arrow--top {
          top: 0;
          left: -5em;
        }
        .arrow--bottom {
          bottom: 0;
          right: 3em;
        }
        
        .circle {
          transform: translate(50%, -50%) rotate(0deg);
          transform-origin: center;
        }
        .circle--ltblue {
          height: 20em;
          width: 20em;
          border-radius: 20em;
          background: linear-gradient(#15e0ff, #3800e7);
        }
        
        .backdrop {
          position: absolute;
          width: 100vw;
          height: 100vh;
          display: block;
          background-color: pink;
        }
        
        .dotted-circle {
          position: absolute;
          top: 0;
          right: 0;
          opacity: 0.3;
          -webkit-animation: rotation 38s linear infinite;
                  animation: rotation 38s linear infinite;
        }
        
        .draw-in {
          stroke-dasharray: 1000;
          stroke-dashoffset: 10;
          -webkit-animation: draw 15s ease-in-out alternate infinite;
                  animation: draw 15s ease-in-out alternate infinite;
        }
        
        @-webkit-keyframes draw {
          from {
            stroke-dashoffset: 1000;
          }
          to {
            stroke-dashoffset: 0;
          }
        }
        
        @keyframes draw {
          from {
            stroke-dashoffset: 1000;
          }
          to {
            stroke-dashoffset: 0;
          }
        }
        .item-to {
          -webkit-animation-duration: 10s;
                  animation-duration: 10s;
          -webkit-animation-iteration-count: infinite;
                  animation-iteration-count: infinite;
          transform-origin: bottom;
        }
        
        .bounce-1 {
          -webkit-animation-name: bounce-1;
                  animation-name: bounce-1;
          -webkit-animation-timing-function: ease;
                  animation-timing-function: ease;
        }
        
        .bounce-2 {
          -webkit-animation-name: bounce-2;
                  animation-name: bounce-2;
          -webkit-animation-timing-function: ease;
                  animation-timing-function: ease;
        }
        
        .bounce-3 {
          -webkit-animation-name: bounce-3;
                  animation-name: bounce-3;
          -webkit-animation-timing-function: ease;
                  animation-timing-function: ease;
        }
        
        @-webkit-keyframes bounce-1 {
          0% {
            transform: translateY(0);
          }
          50% {
            transform: translateY(50px);
          }
          100% {
            transform: translate.........完整代码请登录后点击上方下载按钮下载查看