css - 动画 - 线应该跟随

看看Gsap 运动路径

gsap.registerPlugin(MotionPathPlugin);

gsap.to("#rect", {
  duration: 5, 
  repeat: 12,
  repeatDelay: 3,
  yoyo: true,
  ease: "power1.inOut",
  motionPath:{
    path: "#path",
    align: "#path",
    autoRotate: true,
    alignOrigin: [0.5, 0.5]
  }
});

circle {
  fill: black;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
h1 {
  color: white;
}
#rect text {
  pointer-events: none;
}

body {
  background-color: black;
  color: #999;
  font-family: "Signika Negative", Arial, sans-serif;
  font-weight: 300;
  font-size: 17px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

}
svg {
  overflow: visible;
  height: 100%;
  
  /* Fix Safari rendering bug */
  transform: translateZ(0);
}

path {
  stroke-width: 2;
  stroke: gray;
}

a {
  color: #88ce02;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
#div {
  width: 120px;
  height: 60px;
  pointer-events: none;
  background-color: #aa00ee;
  color: black;
  text-align: center;
  line-height: 60px;
  position: absolute;
  top: 30%;
  left: 60%;
  font-size: 32px;
}

<script src="https://unpkg.com/gsap@3/dist/MotionPathPlugin.min.js"></script>
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<h1>MotionPathPlugin</h1>

<svg width="100%" height="100%" viewBox="-20 0 557 190" id="svg">
  <circle cx="100" cy="100" r="3" />
  <circle cx="300" cy="20" r="3" />
  <path id="path" d="M9,100c0,0,18.53-41.58,49.91-65.11c30-22.5,65.81-24.88,77.39-24.88c33.87,0,57.55,11.71,77.05,28.47c23.09,19.85,40.33,46.79,61.71,69.77c24.09,25.89,53.44,46.75,102.37,46.75c22.23,0,40.62-2.83,55.84-7.43c27.97-8.45,44.21-22.88,54.78-36.7c14.35-18.75,16.43-36.37,16.43-36.37"/>
  <g id="rect">
    <rect width="85" height="30" fill="dodgerblue" />
    <text x="10" y="19" font-size="14">SVG &lt;rect&gt;</text>
  </g>
</svg>





<link href='//fonts.googleapis.com/css?family=Signika+Negative:300,400' rel='stylesheet' type='text/css'>

css - 动画 - 线应该跟随

问题描述

解决方案

推荐阅读