svg+css实现圆滑动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：svg+css实现圆滑动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
svg {
  display: block;
  width: 100vw;
  height: 100vh;
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 4vh 1vmin #0006);
}
.a {
  offset-path: path('M50 50Q75 100 100 50T50 50T 0 50T 50 50');
  -webkit-animation: 4s f infinite ease-in-out;
          animation: 4s f infinite ease-in-out;
}
.a:nth-of-type(64) {
  -webkit-animation-delay: 0.14765625s;
          animation-delay: 0.14765625s;
}
.a:nth-of-type(63) {
  -webkit-animation-delay: 0.1453125s;
          animation-delay: 0.1453125s;
}
.a:nth-of-type(62) {
  -webkit-animation-delay: 0.14296875s;
          animation-delay: 0.14296875s;
}
.a:nth-of-type(61) {
  -webkit-animation-delay: 0.140625s;
          animation-delay: 0.140625s;
}
.a:nth-of-type(60) {
  -webkit-animation-delay: 0.13828125s;
          animation-delay: 0.13828125s;
}
.a:nth-of-type(59) {
  -webkit-animation-delay: 0.1359375s;
          animation-delay: 0.1359375s;
}
.a:nth-of-type(58) {
  -webkit-animation-delay: 0.13359375s;
          animation-delay: 0.13359375s;
}
.a:nth-of-type(57) {
  -webkit-animation-delay: 0.13125s;
          animation-delay: 0.13125s;
}
.a:nth-of-type(56) {
  -webkit-animation-delay: 0.12890625s;
          animation-delay: 0.12890625s;
}
.a:nth-of-type(55) {
  -webkit-animation-delay: 0.1265625s;
          animation-delay: 0.1265625s;
}
.a:nth-of-type(54) {
  -webkit-animation-delay: 0.12421875s;
          animation-delay: 0.12421875s;
}
.a:nth-of-type(53) {
  -webkit-animation-delay: 0.121875s;
          animation-delay: 0.121875s;
}
.a:nth-of-type(52) {
  -webkit-animation-delay: 0.11953125s;
          animation-delay: 0.11953125s;
}
.a:nth-of-type(51) {
  -webkit-animation-delay: 0.1171875s;
          animation-delay: 0.1171875s;
}
.a:nth-of-type(50) {
  -webkit-animation-delay: 0.11484375s;
          animation-delay: 0.11484375s;
}
.a:nth-of-type(49) {
  -webkit-animation-delay: 0.1125s;
          animation-delay: 0.1125s;
}
.a:nth-of-type(48) {
  -webkit-animation-delay: 0.11015625s;
          animation-delay: 0.11015625s;
}
.a:nth-of-type(47) {
  -webkit-animation-delay: 0.1078125s;
          animation-delay: 0.1078125s;
}
.a:nth-of-type(46) {
  -webkit-animation-delay: 0.10546875s;
          animation-delay: 0.10546875s;
}
.a:nth-of-type(45) {
  -webkit-animation-delay: 0.103125s;
          animation-delay: 0.103125s;
}
.a:nth-of-type(44) {
  -webkit-animation-delay: 0.10078125s;
          animation-delay: 0.10078125s;
}
.a:nth-of-type(43) {
  -webkit-animation-delay: 0.0984375s;
          animation-delay: 0.0984375s;
}
.a:nth-of-type(42) {
  -webkit-animation-delay: 0.09609375s;
          animation-delay: 0.09609375s;
}
.a:nth-of-type(41) {
  -webkit-animation-delay: 0.09375s;
          animation-delay: 0.09375s;
}
.a:nth-of-type(40) {
  -webkit-animation-delay: 0.09140625s;
          animation-delay: 0.09140625s;
}
.a:nth-of-type(39) {
  -webkit-animation-delay: 0.0890625s;
          animation-delay: 0.0890625s;
}
.a:nth-of-type(38) {
  -webkit-animation-delay: 0.08671875s;
          animation-delay: 0.08671875s;
}
.a:nth-of-type(37) {
  -webkit-animation-delay: 0.084375s;
          animation-delay: 0.084375s;
}
.a:nth-of-type(36) {
  -webkit-animation-delay: 0.08203125s;
          animation-delay: 0.08203125s;
}
.a:nth-of-type(35) {
  -webkit-animation-delay: 0.0796875s;
          animation-delay: 0.0796875s;
}
.a:nth-of-type(34) {
  -webkit-animation-delay: 0.07734375s;
          animation-delay: 0.07734375s;
}
.a:nth-of-type(33) {
  -webkit-animation-delay: 0.075s;
          animation-delay: 0.075s;
}
.a:nth-of-type(32) {
  -webkit-animation-delay: 0.07265625s;
          animation-delay: 0.07265625s;
}
.a:nth-of-type(31) {
  -webkit-animation-delay: 0.0703125s;
          animation-delay: 0.0703125s;
}
.a:nth-of-type(30) {
  -webkit-animation-delay: 0.06796875s;
          animation-delay: 0.06796875s;
}
.a:nth-of-type(29) {
  -webkit-animation-delay: 0.065625s;
          animation-delay: 0.065625s;
}
.a:nth-of-type(28) {
  -webkit-animation-delay: 0.06328125s;
          animation-delay: 0.06328125s;
}
.a:nth-of-type(27) {
  -webkit-animation-delay: 0.0609375s;
          animation-delay: 0.0609375s;
}
.a:nth-of-type(26) {
  -webkit-animation-delay: 0.05859375s;
          animation-delay: 0.05859375s;
}
.a:nth-of-type(25) {
  -webkit-animation-delay: 0.05625s;
          animation-delay: 0.05625s;
}
.a:nth-of-type(24) {
  -webkit-animation-delay: 0.05390625s;
          animation-delay: 0.05390625s;
}
.a:nth-of-type(23) {
  -webkit-animation-delay: 0.0515625s;
          animation-delay: 0.0515625s;
}
.a:nth-of-type(22) {
  -webkit-animation-delay: 0.04921875s;
          animation-delay: 0.04921875s;
}
.a:nth-of-type(21) {
  -webkit-animation-delay: 0.046875s;
          animation-delay: 0.046875s;
}
.a:nth-of-type(20) {
  -webkit-animation-delay: 0.04453125s;
          animation-delay: 0.04453125s;
}
.a:nth-of-type(19) {
  -webkit-animation-delay: 0.0421875s;
          animation-delay: 0.0421875s;
}
.a:nth-of-type(18) {
  -webkit-animation-delay: 0.03984375s;
          animation-delay: 0.03984375s;
}
.a:nth-of-type(17) {
  -webkit-animation-delay: 0.0375s;
          animation-delay: 0.0375s;
}
.a:nth-of-type(16) {
  -webkit-animation-delay: 0.03515625s;
          animation-delay: 0.03515625s;
}
.a:nth-of-type(15) {
  -webkit-animation-delay: 0.0328125s;
          animation-delay: 0.0328125s;
}
.a:nth-of-type(14) {
  -webkit-animation-delay: 0.03046875s;
          animation-delay: 0.03046875s;
}
.a:nth-of-type(13) {
  -webkit-animation-delay: 0.028125s;
          animation-delay: 0.028125s;
}
.a:nth-of-type(12) {
  -webkit-animation-delay: 0.02578125s;
          animation-delay: 0.02578125s;
}
.a:nth-of-type(11) {
  -webkit-animation-delay: 0.0234375s;
          animation-delay: 0.0234375s;
}
.a:nth-of-type(10) {
  -webkit-animation-delay: 0.02109375s;
          animation-delay: 0.02109375s;
}
.a:nth-of-type(9) {
  -webkit-animation-delay: 0.01875s;
          animation-delay: 0.01875s;
}
.a:nth-of-type(8) {
  -webkit-animation-delay: 0.01640625s;
          animation-delay: 0.01640625s;
}
.a:nth-of-type(7) {
  -webkit-animation-delay: 0.0140625s;
          animation-delay: 0.0140625s;
}
.a:nth-of-type(6) {
  -webkit-animation-delay: 0.01171875s;
          animation-delay: 0.01171875s;
}
.a:nth-of-type(5) {
  -webkit-animation-delay: 0.009375s;
          animation-delay: 0.009375s;
}
.a:nth-of-type(4) {
  -webkit-animation-delay: 0.00703125s;
          animation-delay: 0.00703125s;
}
.a:nth-of-type(3) {
  -webkit-animation-delay: 0.0046875s;
          animation-delay: 0.0046875s;
}
.a:nth-of-type(2) {
  -webkit-animation-delay: 0.00234375s;
          animation-delay: 0.00234375s;
}
.a:nth-of-type(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
@-webkit-keyframes f {
  to {
    offset-distance: 100%;
  }
}
@keyframes f {
  to {
    offset-distance: 100%;
  }
}
</style>




</head>

<body>
  <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
  <g class="a">
    <path d="M0 10 L10 0 L0 -10Z" fill="black"></path>
    <circle cx="2" cy="0" r="6" fill="white"></circle>
  </g>
  <g class="a">
    <path d="M0 10 L10 0 L0 -10Z" fill="black"></path>
    <circle cx="2" cy="0" r="6" fill="white"></circle>
  </g>
  <g class="a">
    <path d="M0 10 L10 0 L0 -10Z" fill="black"></path>
    <circle cx="2" cy="0" r="6" fill="white"></circle>
  </g>
  <g class="a">
    <path d="M0 10 L10 0 L0 -10Z" fill="black"></path>
    <circle cx="2" cy="0" r="6" fill="white"></circle>
  </g>
  <g class="a">
    <path d="M0 10 L10 0 L0 -10Z" fill="black"></path>
    <circle cx="2" cy="0" r="6" fill="white"></circle>
  </g>
  <g class="a">
    <path d="M0 10 L10 0 L0 -10Z" fill="black"></path>
    <circle cx="2" cy="0" r="6" fill="white"></circle>
  </g>
  <g class="a">
    <path d="M0 10 L10 0 L0 -10Z" fill="black"></path>
    <circle cx="2" cy="0" r="6" fill="white"></circle>
  </g>
  <g class="a">
    <path d="M0 10 L10 0 L0 -10Z" fill="black"></path>
    <circle cx="2" cy="0" r="6" fill="white"></circle>
  </g>
  <g class="a">
    <path d="M0 10 L10 0 L0 -10Z" fill="black"></path>
    <circle cx="2" cy="0" r="6" fill="white"></circle>
  </g>
  <g class="a">
    <path d="M0 10 L10 0 L0 -10Z" fill="black"></path>
    <circle cx="2" cy="0" r="6" fill="white"></circle>
  </g>
  <g class="a">
    <path d="M0 10 L10 0 L0 -10Z" fill="black"></path>
    <circle cx="2" cy="0" r="6" fill="white"></circle>
  </g>
  <g class="a">
    <path d="M0 10 L10 0 L0 -10Z" fill="black"></path>
    <circle cx="2" cy="0" r="6" fill="white"></circle>
  </g>
  <g class="a">
    <path d="M0 10 L10 0 L0 -10Z" fill="black"></path>
    <circle cx="2" cy="0" r="6" fill="white"></circle>
  </g>
  <g class="a">
    <path d="M0 10 L10 0 L0 -10Z" fill="black"></path>
    <circle cx="2" cy="0" r="6" fill="white"></circle>
  </g>
  <g class="a">
    <path d="M0 10 L10 0 L0 -10Z" fill="black"></path>
    <circle cx="2" cy="0" r="6" fill="white"></circle>
  </g>
  <g class="a">
    <path d="M0 10 L10 0 L0 -10Z" fill="black"></path>
    <circle cx="2" cy="0" r="6" fill="white"></circle>
  </g>
  <g class="a">
    <path d="M0 10 L10 0 L0 -10Z" fill="black"></path>
    <circle cx="2" cy="0" r="6" fill="wh.........完整代码请登录后点击上方下载按钮下载查看