使用CSS动画中的线条加入点

Question

我有这个动画使用CSS，它们是简单的点上下移动：

NativeModules.SharefPreference.getMpin((mpin)=>console.log(mpin))

https://codepen.io/rjchirinos/pen/jKyYBM

我想使用线条加入这些点，所以每次点移动时，线条都应该旋转以保持连接。

以下是我想要做的一个例子：https://neomam.com/interactive/13reasons/

你能帮我弄明白一下吗？

提前致谢！

Answer 1

我会考虑使用倾斜变换来轻松制作这样的动画。

这是一个简化的例子：

＆＃13;

＆＃13;

.dot-animation {
  display: block;
  padding:50px;
}
.dot-animation span {
  position:relative;
  display: inline-block;
  margin-top: 10px;
  width:50px;
  margin:10px 1px;
  height:5px;
  background:#48c0c0;
}
.dot-animation span:first-child {
  background:#fff;
}
.dot-animation span:before {
  content:"";
  position:absolute;
  z-index:2;
  right:-12px;
  top:-12px;
  height: 20px;
  width: 20px;
  background: white;
  border: 5px solid #48c0c0;
  border-radius: 50%;
}

.dot-animation span:nth-child(even) {
  animation:move-l 1s linear infinite alternate;
  transform-origin:left;
}
.dot-animation span:nth-child(even):before {
  animation:move-r 1s linear infinite alternate;
}
.dot-animation span:nth-child(odd) {
  animation:move-r 1s linear infinite alternate;
  transform-origin:right;
}
.dot-animation span:nth-child(odd):before {
  animation:move-l 1s linear infinite alternate;
  transform-origin:right;
}
 

@keyframes move-l {
  from {
    transform: skewY(0px);
  }
  to {
    transform: skewY(-25deg);
  }
}
@keyframes move-r {
  from {
    transform: skewY(0px);
  }
  to {
    transform: skewY(25deg);
  }
}

＆＃13;

<div class="dot-animation">
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
</div>

＆＃13;

＆＃13;

＆＃13;