svg感叹号动画艺术效果-html代码-BFW代码库

svg感叹号动画艺术效果

代码语言：html

代码描述：svg感叹号动画艺术效果

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


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

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

.letter-i {
  width: 80vh;
  height: 80vh;
}

.cls-1 {
  fill: none;
  stroke: #000;
  stroke-miterlimit: 10;
  stroke-width: 5px;
  stroke-linecap: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 1500;
  -webkit-animation: lines 4s infinite calc(var(--item) * 1s);
          animation: lines 4s infinite calc(var(--item) * 1s);
}

.dot {
  stroke-dasharray: 500;
  stroke: var(--color);
}

.stem {
  stroke: var(--color);
}

@-webkit-keyframes lines {
  100% {
    stroke-dashoffset: 3000;
  }
}

@keyframes lines {
  100% {
    stroke-dashoffset: 3000;
  }
}
</style>

</head>
<body translate="no">
<svg class="letter-i" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
<path class="cls-1 stem" style="--item: 1; --color: rgb(246, 9, 149)" d="M534,688c-21.86-.21-46.54-1.64-60.89-18.14-11.57-13.31-12.73-32.47-13.32-50.1q-3.09-92.09-6.16-184.16c-2-59.35-3.65-120.66,18.22-175.87a1078.09,1078.09,0,0,1-201.94,61.42c19.19-1.82,41.22-2.67,54.66,11.13,11,11.33,12.29,28.69,12.83,44.49q4.38,127.62,2.16,255.36c-.21,11.76-.66,24.21-7.08,34.07-10.83,16.63-32.76,19-50.79,20.49-4.64.37-25.91-.25-23.84,5.56,2.43,6.8,20.9,4.78,25.36,4.62q80.61-2.88,161.22-5.7C474.19,690.11,504.23,687.72,534,688Z" />
<path class="cls-1 stem" style="--item: 2; --color: rgb(254, 219, 59)" d="M467.79,653.59c-10.4-22.45-10.49-48.11-10.39-72.85.41-107.63.84-215.47,11.61-322.56a560.3,560.3,0,0,1-228.84,67c28.68-8.32,80.6-14.86,94.58,11.52s8.15,97.66,9.11,127.5c1.6,49.55-10.71,104.........完整代码请登录后点击上方下载按钮下载查看