Объединяйте точки, используя линии в CSS-анимации - PullRequest
Новая
       32

Объединяйте точки, используя линии в CSS-анимации

0 голосов
/ 10 июня 2018

У меня есть эта анимация, работающая с 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 Ответ

0 голосов
/ 10 июня 2018

Я хотел бы рассмотреть возможность использования перекоса для упрощения такой анимации.

Вот упрощенный пример: 

.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>
...