纯css实现小球沿绳子轨迹动画-html代码-BFW代码库

纯css实现小球沿绳子轨迹动画

代码语言：html

所属分类：动画

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

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

<title> Animating offset-distance &amp; offset-path (&amp; d)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
  main {
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
}

.mover {
  width: 1.2rem;
  height: 1.2rem;
  background: hsl(200, 90%, 40%);
  -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 80%, 0 20%);
          clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 80%, 0 20%);
  
  offset-path: path(var(--path1));
  -webkit-animation: 
    move-it 19000ms 0ms infinite alternate ease-in-out, 
    change-it 4000ms 0ms infinite alternate ease-in-out;
          animation: 
    move-it 19000ms 0ms infinite alternate ease-in-out, 
    change-it 4000ms 0ms infinite alternate ease-in-out;
}

svg path {
  d: path(var(--path1));
  -webkit-animation: change-d 4000ms 0ms infinite alternate ease-in-out;
          animation: change-d 4000ms 0ms infinite alternate ease-in-out;
  transition: opacity 400ms ease-in-out;
}
svg:hover path {
  opacity: 0;
}

@-webkit-keyframes move-it {
  100% {
    offset-distance: 100%;
  }
}

@keyframes move-it {
  100% {
    offset-distance: 100%;
  }
}
@-webkit-keyframes change-it {
  100% {
    offset-path: path(var(--path2));
  }
}
@keyframes change-it {
  100% {
    offset-path: path(var(--path2));
  }
}
@-webkit-keyframes change-d {
  100% {
    d: path(var(--path2));
  }
}
@keyframes change-d {
  100% {
    d: path(var(--path2));
  }
}

:root {
  --path1: "M50,0 C100,0 100,50 50,50 C0,.........完整代码请登录后点击上方下载按钮下载查看