9 389 Animation / Codepen

Организм, абстракция на CSS

Абстрактная анимация на чистом CSS

HTML

<div class='organism'>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
</div>
<div class='organism'>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
  <div class='atom'></div>
</div>

SCSS

$atom: 100;
$speed: 3s;
html,body{
  width: 100%;height: 100%;
}
body{
  background-color: #140032;
  overflow: hidden;
  margin:0;
  perspective: 1000px;
  *,*:after{
    position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;border-radius: 50%;
  }
}
.organism{
  &:first-child{
    transform: scale(-1,-1)
  }
}
.atom{
  width: 100px;
  height: 100px;
  animation: life $speed ease-in-out infinite;
  &:after{
    content: "";
    width: inherit;
    height: inherit;
    border-bottom: 2px dotted transparent;
  }
  @for $i from 0 through $atom{
    &:nth-child(#{$i + 1}){
      animation-delay: -$i * $speed / $atom;
      &:after{
        transform: rotateX($i * 720deg / $atom) translate($i * 500px / $atom) scale($i * 4 / $atom);
        border-color: hsla(250 + ($i * 50 / $atom),100%,50%,1);
      }
    }
  }
}
@keyframes life {
  50%{
    transform: rotateY(180deg) translateY(200px) scale(1,-1);
  }
}
Ссылки
https://codepen.io/Tsankashvili/pen/MWwJQrJ

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи

Абстракция из расползающихся из центра линий разного цвета
Codepen
Бесконечная галактика
Codepen
Hypnosis claws
Codepen
3D сфера на чистом CSS
Codepen
3D радужный гипнотический танец
Codepen