Анимированный логотип на чистом CSS

Если вы посмотрите на логотип, он состоит из 4 основных цветных точек. Эти точки расширяются и принимают вид скругленных линий, затем сжимаются, принимая первоначальный вид.

Они также перекрещиваясь, перекрывают друг друга, да и весь логотип установлен под углом. При этом цвета в местах пересечения линий смешиваются, но об этом в конце статьи.

Создание анимированного логотипа на чистом CSS начнем с написания HTML-кода. Он очень простой — в одном блоке расположены 4 элемента, каждый из которых «живет своей жизнью».

<div class="slack ">
  <span class="slack__dot slack__dot_a"></span>
  <span class="slack__dot slack__dot_b"></span>
  <span class="slack__dot slack__dot_c"></span>
  <span class="slack__dot slack__dot_d"></span>
</div>

Задаем относительное позиционирование и общий размер нашему блоку-контейнеру, а также угол наклона. Каждая точка абсолютно позиционирована внутри родительского контейнера, и имеет свои размеры и радиус закругления, равный половине диаметра.

.slack {
  position: relative;
  z-index: 100;
  width: 96px;
  height: 96px;
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg);
}
.slack__dot {
  display: block;
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 9px;
}

Далее каждому элементу (круг — линия) логотипа присваиваем свой цвет, вид трансформации и время анимации. Указываем для каждого свое положение: слева вверху, справа вверху и соответственно слева и справа снизу.

.slack__dot_a {
  top: 0;
  left: 0;
  background-color: #3eb991;
  -webkit-transform: translateX(18px);
  transform: translateX(18px);
  -webkit-animation: slack-animation--a 2s infinite;
  animation: slack-animation--a 2s infinite;
}

.slack__dot_b {
  top: 0;
  right: 0;
  background-color: #6ecadc;
  -webkit-transform: translateY(18px);
  transform: translateY(18px);
  -webkit-animation: slack-animation--b 2s infinite;
  animation: slack-animation--b 2s infinite;
}

.slack__dot_c {
  bottom: 0;
  right: 0;
  background-color: #e9a820;
  -webkit-transform: translateX(-18px);
  transform: translateX(-18px);
  -webkit-animation: slack-animation--c 2s infinite;
  animation: slack-animation--c 2s infinite;
}

slack__dot_d {
  bottom: 0;
  left: 0;
  background-color: #e01563;
  -webkit-transform: translateY(-18px);
  transform: translateY(-18px);
  -webkit-animation: slack-animation--d 2s infinite;
  animation: slack-animation--d 2s infinite;
}

В коде выше для каждого элемента указана анимация, имеющая свое индивидуальное название: slack-animation—a, slack-animation—b, slack-animation—c, slack-animation—d соответственно. Время анимации 2 секунды и повторяется она бесконечно.

Анимация построена по одному принципу: точка начинает расширятся и превращается линию, затем линия начинает сжиматься и превращается опять в точку. Следующем шагом точка перемещаеся в свое первоначальное положение и все начинается заново. Разница заключается в том, у каждого элемента своя траектория движения.

Анимация для точки a

@-webkit-keyframes slack-animation--a {
  0% {
    top: 0;
    bottom: auto;
    height: 18px;
  }
  33% {
    top: 0;
    bottom: auto;
    height: 96px;
  }
  34% {
    top: auto;
    bottom: 0;
    height: 96px;
  }
  66% {
    top: auto;
    bottom: 0;
    height: 18px;
  }
  100% {
    top: auto;
    bottom: 78px;
    height: 18px;
  }
}

@keyframes slack-animation--a {
  0% {
    top: 0;
    bottom: auto;
    height: 18px;
  }
  33% {
    top: 0;
    bottom: auto;
    height: 96px;
  }
  34% {
    top: auto;
    bottom: 0;
    height: 96px;
  }
  66% {
    top: auto;
    bottom: 0;
    height: 18px;
  }
  100% {
    top: auto;
    bottom: 78px;
    height: 18px;
  }
}

Анимация для точки b

@-webkit-keyframes slack-animation--b {
  0% {
    right: 0;
    left: auto;
    width: 18px;
  }
  33% {
    right: 0;
    left: auto;
    width: 96px;
  }
  34% {
    right: auto;
    left: 0;
    width: 96px;
  }
  66% {
    right: auto;
    left: 0;
    width: 18px;
  }
  100% {
    right: auto;
    left: 78px;
    width: 18px;
  }
}
@keyframes slack-animation--b {
  0% {
    right: 0;
    left: auto;
    width: 18px;
  }
  33% {
    right: 0;
    left: auto;
    width: 96px;
  }
  34% {
    right: auto;
    left: 0;
    width: 96px;
  }
  66% {
    right: auto;
    left: 0;
    width: 18px;
  }
  100% {
    right: auto;
    left: 78px;
    width: 18px;
  }
}

Анимация для точки c

@-webkit-keyframes slack-animation--c {
  0% {
    bottom: 0;
    top: auto;
    height: 18px;
  }
  33% {
    bottom: 0;
    top: auto;
    height: 96px;
  }
  34% {
    bottom: auto;
    top: 0;
    height: 96px;
  }
  66% {
    bottom: auto;
    top: 0;
    height: 18px;
  }
  100% {
    bottom: auto;
    top: 78px;
    height: 18px;
  }
}
@keyframes slack-animation--c {
  0% {
    bottom: 0;
    top: auto;
    height: 18px;
  }
  33% {
    bottom: 0;
    top: auto;
    height: 96px;
  }
  34% {
    bottom: auto;
    top: 0;
    height: 96px;
  }
  66% {
    bottom: auto;
    top: 0;
    height: 18px;
  }
  100% {
    bottom: auto;
    top: 78px;
    height: 18px;
  }
}

Анимация для точки d

@-webkit-keyframes slack-animation--d {
  0% {
    left: 0;
    right: auto;
    width: 18px;
  }
  33% {
    left: 0;
    right: auto;
    width: 96px;
  }
  34% {
    left: auto;
    right: 0;
    width: 96px;
  }
  66% {
    left: auto;
    right: 0;
    width: 18px;
  }
  100% {
    left: auto;
    right: 78px;
    width: 18px;
  }
}
@keyframes slack-animation--d {
  0% {
    left: 0;
    right: auto;
    width: 18px;
  }
  33% {
    left: 0;
    right: auto;
    width: 96px;
  }
  34% {
    left: auto;
    right: 0;
    width: 96px;
  }
  66% {
    left: auto;
    right: 0;
    width: 18px;
  }
  100% {
    left: auto;
    right: 78px;
    width: 18px;
  }
}

Теперь наш логотип стал анимированным. Линии как бы перекрещиваются друг с другом, проходя друг над другом в точках пересечения. Это хорошо видно на рисунке.

А в начале статьи они проходят как бы сквозь друг друга, при этом цвета смешиваются.

Свойство mix-blend-mode указывает режим наложения исходного изображения с наложенным. В качестве фонового изображения может выступать любой элемент, расположенный под исходным элементом.При помощи режимов наложения в CSS можно определять, как несколько слоев накладываются друг на друга. До настоящего времени, такой функционал был прерогативой программ фотомонтажа, но теперь он доступен и в CSS.

Режимы наложения цвета отлично подходят для достижения различных визуальных эффектов на странице, что было невозможно ранее. Эта технология только вступает в свою полную силу и на данный момент браузеры поддерживают её лишь частично.

Указав свойство mix-blend-mode со значением multiply для наших кружков получаем эффект смешивания цветов.

.slack__dot {
  display: block;
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 9px;
  mix-blend-mode: multiply;
}

Оригинал статьи.

Вольный перевод: shabloncss.ru.