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

代码语言:html

所属分类:背景

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

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

网友评论0