svg数字1动画效果-html代码-BFW代码库

svg数字1动画效果

代码语言：html

所属分类：动画

代码描述：svg数字1动画效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  background-color: #1c0045;
  display: -webkit-box;
  display: flex;
  height: 100vh;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}

.number-1 {
  width: 75vmin;
  height: 75vmin;
}

.group .path-1 {
  stroke-dasharray: 536 1072;
  stroke-dashoffset: 1072;
  -webkit-animation: path-1 3s infinite calc(var(--group) * .5s) ease-in-out;
          animation: path-1 3s infinite calc(var(--group) * .5s) ease-in-out;
}
.group .path-2 {
  stroke-dasharray: 229 458;
  stroke-dashoffset: 458;
  -webkit-animation: path-2 3s infinite calc(calc(var(--group) * .5s) + .4s) ease-out;
          animation: path-2 3s infinite calc(calc(var(--group) * .5s) + .4s) ease-out;
}

@-webkit-keyframes path-1 {
  25%, 75% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -1072;
  }
}

@keyframes path-1 {
  25%, 75% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -1072;
  }
}
@-webkit-keyframes path-2 {
  25%, 75% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -458;
  }
}
@keyframes path-2 {
  25%, 75% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -458;
  }
}
</style>

</head>
<body translate="no">
<svg id="number-1" class="number-1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 800">
<defs>
<style>

        .cls-2,
        .cls-3,
        .cls-4,
        .cls-5,
        .cls-6,
        .cls-7 {
            fill: none;
            stroke-linecap: round;
            stroke-miterlimit: 10;
            stroke-width: 53.12px;
        }

        .cls-2 {
            stroke: url(#linear-gradient);
        }

        .cls-3 {
            stroke: url(#linear-gradient-2);
        }

        .cls-4 {
            stroke: url(#linear-gradient-3);
        }

        .cls-5 {
            stroke: url(#linear-gradient-4);
        }

        .cls-6 {
            stroke: url(#linear-gradient-5);
        }

        .cls-7 {
            stroke: url(#linear-gradient-6);
        }
        </style>
<linearGradient id="linear-gradient" x1="342.36" y1="687.26" x2="342.36" y2="132.77" gradientUnits="userSpaceOnUse">
<stop .........完整代码请登录后点击上方下载按钮下载查看