在CSS动画中使用线条连接点
在CSS动画中使用线条连接点
提问于 2018-06-10 08:32:05
我用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/
你能帮我弄清楚是怎么回事吗？
提前感谢！
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-10 08:47:14
我会考虑使用倾斜变换来使这样的动画变得简单。
下面是一个简化的示例：
.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50779651
复制相关文章
相似问题