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

svg+css实现圆滑动画效果代码

代码语言：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) {.........完整代码请登录后点击上方下载按钮下载查看