Создание анимированного лого на CSS

demosourse

В этом уроке мы воспользуемся CSS3 анимацией, трансформациями и прочими техниками для создания анимированного логотипа.

Логотип

Идея: логотип состоит из четырёх разноцветных элементов (точек). Эти точки преобразуются в линии, а затем снова возвращаются в исходное состояние.

HTML

Всего у нас будет четыре элемента различного цвета. Каждый элемент будет располагаться по отдельности для того чтобы мы могли отдельно управлять цветом, анимацией и прочими фишками:

<div class="c-slack">
  <span class="c-slack__dot c-slack__dot--a"></span>
  <span class="c-slack__dot c-slack__dot--b"></span>
  <span class="c-slack__dot c-slack__dot--c"></span>
  <span class="c-slack__dot c-slack__dot--d"></span>
</div>

Результат сейчас не виден. Для этого нам нужно написать немного CSS.

Определение Sass переменных & родительского класса

Мы будем использовать Sass (SCSS) для работы с переменными и математическими операциями:

  1. Определяем размер лого: 96px;
  2. Так же нам понадобится диаметр точек 18px;
  3. Финальное лого должно быть перевёрнуто на 15 градусов;
  4. Всё должно происходить за 2 секунды;
  5. Так же для каждого цвета мы заведём отдельную переменную.

Вот список переменных, которые я буду использовать:

// переменные

$slack-size: 96px;
$dot-diameter: 18px;
$slack-angle: 15deg;
$duration: 2s;

$slack-blue: #6ecadc;
$slack-yellow: #e9a820;
$slack-pink: #e01563;
$slack-green: #3eb991;

Давайте приступим к написанию стилей родительского класса. Внутренние элементы будут расположены абсолютно, так что самому элементу будет присвоено релативное позиционирование:

.c-slack {
  position: relative;
  z-index: 100;
  margin: 80px auto;
  width: $slack-size;
  height: $slack-size;
}

Позиционирование точек

Каждая точка будет позиционироваться абсолютно относительно родительского контейнера и содержит border radius равный диаметр/2. Так же каждая из точек будет расположена согласно опциям top, right, bottom, и left. Располагаем точки по углам квадратного контейнера:

.c-slack__dot {
  display: block;
  position: absolute;
  width: $dot-diameter;
  height: $dot-diameter;
  border-radius: $dot-diameter/2;
}

.c-slack__dot--a {
  top: 0; left: 0;
  background-color: $slack-green;
}

.c-slack__dot--b {
  top: 0; right: 0;
  background-color: $slack-blue;
}

.c-slack__dot--c {
  bottom: 0; right: 0;
  background-color: $slack-yellow;
}

.c-slack__dot--d {
  bottom: 0; left: 0;
  background-color: $slack-pink;
}

Результат должен быть следующий:

Далее приступим к анимации.

Анимация

Давайте анимируем первую точку, "dot a": будем увеличивать высоту переменной $slack-size. После этого не только форма, но и позиция должна стать прежней:

@keyframes slack-animation--a {
  0% {
    top: 0;
    bottom: auto;
    height: $dot-diameter;
  }
  33% {
    top: 0;
    bottom: auto;
    height: $slack-size;
  }
  34% {
    top: auto;
    bottom: 0;
    height: $slack-size;
  }
  66% {
    top: auto;
    bottom: 0;
    height: $dot-diameter;
  }
  100% {
    top: auto;
    bottom: $slack-size - $dot-diameter;
    height: $dot-diameter;
  }
}

В браузере ничего не изменится. Для этого мы должны активировать анимацию:

.c-slack__dot--a {
  /* other styles */
  animation: slack-animation--a $duration infinite;
}

Теперь результат должен быть такой:

Теперь давайте сделаем такую же операцию со второй точкой:

@keyframes slack-animation--b {
  0% {
    right: 0;
    left: auto;
    width: $dot-diameter;
  }
  33% {
    right: 0;
    left: auto;
    width: $slack-size;
  }
  34% {
    right: auto;
    left: 0;
    width: $slack-size;
  }
  66% {
    right: auto;
    left: 0;
    width: $dot-diameter;
  }
  100% {
    right: auto;
    left: $slack-size - $dot-diameter;
    width: $dot-diameter;
  }
}

Не забываем подключить анимацию:

.c-slack__dot--b {
  /* other styles */
  animation: slack-animation--b $duration infinite;
}

Теперь делаем то же самое с точкой c:

@keyframes slack-animation--c {
  0% {
    bottom: 0;
    top: auto;
    height: $dot-diameter;
  }
  33% {
    bottom: 0;
    top: auto;
    height: $slack-size;
  }
  34% {
    bottom: auto;
    top: -($slack-size - $slack-size);
    height: $slack-size;
  }
  66% {
    bottom: auto;
    top: -($slack-size - $slack-size);
    height: $dot-diameter;
  }
  100% {
    bottom: auto;
    top: $slack-size - $dot-diameter;
    height: $dot-diameter;
  }
}

Подключаем анимацию для точки c:

.c-slack__dot--c {
  /* other styles */
  animation: slack-animation--c $duration infinite;
}

И наконец, точка d. Анимация:

@keyframes slack-animation--d {
  0% {
    left: 0;
    right: auto;
    width: $dot-diameter;
  }
  33% {
    left: 0;
    right: auto;
    width: $slack-size;
  }
  34% {
    left: auto;
    right: -($slack-size - $slack-size);
    width: $slack-size;
  }
  66% {
    left: auto;
    right: -($slack-size - $slack-size);
    width: $dot-diameter;
  }
  100% {
    left: auto;
    right: $slack-size - $dot-diameter;
    width: $dot-diameter;
  }
}

Подключаем анимацию:

.c-slack__dot--d {
  /* other styles */
  animation: slack-animation--d $duration infinite;
}

Теперь можем посмотреть результат в браузере:

Перекрытие элементов

Теперь нам необходимо сделать так чтобы элементы логотипа были немного смещены и перекрывали друг друга:

.c-slack__dot--a {
  /* other styles */
  transform: translateX($dot-diameter);
}

.c-slack__dot--b {
  /* other styles */
  transform: translateY($dot-diameter);
}

.c-slack__dot--c {
  /* other styles */
  transform: translateX(-$dot-diameter);
}

.c-slack__dot--d {
  /* other styles */
  transform: translateY(-$dot-diameter);
}

Теперь результат будет таков:

Поворот логотипа

Теперь нам необходимо повернуть логотип на запланированное число градусов:

.c-slack {
  /* other styles */
  transform: rotate(-$slack-angle);
}

Результат:

Режим отображения цвета

Далее преобразуем режим отображения цвета элементов массива, в результате чего логотип становится полу-прозрачным:

.c-slack__dot {
  /* other styles */
  mix-blend-mode: multiply;
}

Финальный результат:

Итог

Вот и всё! Надеемся, что данный урок будет вам полезен!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://callmenick.com/post/building-the-slack-animating-logo-with-only-css
Перевел: Станислав Протасевич
Урок создан: 7 Сентября 2015
Просмотров: 20333
Правила перепечатки

5 последних уроков рубрики "CSS"

^ Наверх ^