css - 在 CSS 动画中使用线连接点

Question

我用 CSS 制作了这个动画，它们是上下移动的简单点:

$dot-list: 1 2 3 4 5;

.dot-animation {
    display: block;
    span {
        display: inline-block;
        margin-top: 10px;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        &:not(:first-child) { margin-left: 30px; }
    }
    @each $current-dot in $dot-list {
        $i: index($dot-list, $current-dot);
        $t: $i * -0.787;
        span:nth-child(#{$i}) {
            background: white;
            border: 5px solid #48c0c0;
            animation: move 1s ease-in-out (#{$t}s) infinite alternate;
        }
    }
}

@keyframes move {
    from { transform: translateY(0px); }
    to { transform: translateY(60px); }
}

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

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

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

你能帮我弄清楚怎么做吗？

提前致谢!

Answer 1

我会考虑使用倾斜变换来简化此类动画。

这是一个简化的例子:

.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);
  }
}

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