В этом уроке мы воспользуемся CSS3 анимацией, трансформациями и прочими техниками для создания анимированного логотипа. Логотип Идея: логотип состоит из четырёх разноцветных элементов (точек). Эти точки преобразуются в линии, а затем снова возвращаются в исходное состояние. HTML Всего у нас будет четыре элемента различного цвета. Каждый элемент будет располагаться по отдельности для того чтобы мы могли отдельно управлять цветом, анимацией и прочими фишками: 1 <div class="c-slack"> 2 <span class="c-slack__dot c-slack__dot--a"></span> 3 <span class="c-slack__dot c-slack__dot--b"></span> 4 <span class="c-slack__dot c-slack__dot--c"></span> 5 <span class="c-slack__dot c-slack__dot--d"></span> 6 </div> Результат сейчас не виден. Для этого нам нужно написать немного CSS. Определение Sass переменных & родительского класса Мы будем использовать Sass (SCSS) для работы с переменными и математическими операциями: Определяем размер лого: 96px; Так же нам понадобится диаметр точек 18px; Финальное лого должно быть перевёрнуто на 15 градусов; Всё должно происходить за 2 секунды; Так же для каждого цвета мы заведём отдельную переменную. Вот список переменных, которые я буду использовать: 01 // переменные 02 03 $slack-size: 96px; 04 $dot-diameter: 18px; 05 $slack-angle: 15deg; 06 $duration: 2s; 07 08 $slack-blue: #6ecadc; 09 $slack-yellow: #e9a820; 10 $slack-pink: #e01563; 11 $slack-green: #3eb991; Давайте приступим к написанию стилей родительского класса. Внутренние элементы будут расположены абсолютно, так что самому элементу будет присвоено релативное позиционирование: 1 .c-slack { 2 position: relative; 3 z-index: 100; 4 margin: 80px auto; 5 width: $slack-size; 6 height: $slack-size; 7 } Позиционирование точек Каждая точка будет позиционироваться абсолютно относительно родительского контейнера и содержит border radius равный диаметр/2. Так же каждая из точек будет расположена согласно опциям top, right, bottom, и left. Располагаем точки по углам квадратного контейнера: 01 .c-slack__dot { 02 display: block; 03 position: absolute; 04 width: $dot-diameter; 05 height: $dot-diameter; 06 border-radius: $dot-diameter/2; 07 } 08 09 .c-slack__dot--a { 10 top: 0; left: 0; 11 background-color: $slack-green; 12 } 13 14 .c-slack__dot--b { 15 top: 0; right: 0; 16 background-color: $slack-blue; 17 } 18 19 .c-slack__dot--c { 20 bottom: 0; right: 0; 21 background-color: $slack-yellow; 22 } 23 24 .c-slack__dot--d { 25 bottom: 0; left: 0; 26 background-color: $slack-pink; 27 } Результат должен быть следующий: Далее приступим к анимации. Анимация Давайте анимируем первую точку, "dot a": будем увеличивать высоту переменной $slack-size. После этого не только форма, но и позиция должна стать прежней: 01 @keyframes slack-animation--a { 02 0% { 03 top: 0; 04 bottom: auto; 05 height: $dot-diameter; 06 } 07 33% { 08 top: 0; 09 bottom: auto; 10 height: $slack-size; 11 } 12 34% { 13 top: auto; 14 bottom: 0; 15 height: $slack-size; 16 } 17 66% { 18 top: auto; 19 bottom: 0; 20 height: $dot-diameter; 21 } 22 100% { 23 top: auto; 24 bottom: $slack-size - $dot-diameter; 25 height: $dot-diameter; 26 } 27 } В браузере ничего не изменится. Для этого мы должны активировать анимацию: 1 .c-slack__dot--a { 2 /* other styles */ 3 animation: slack-animation--a $duration infinite; 4 } Теперь результат должен быть такой: Теперь давайте сделаем такую же операцию со второй точкой: 01 @keyframes slack-animation--b { 02 0% { 03 right: 0; 04 left: auto; 05 width: $dot-diameter; 06 } 07 33% { 08 right: 0; 09 left: auto; 10 width: $slack-size; 11 } 12 34% { 13 right: auto; 14 left: 0; 15 width: $slack-size; 16 } 17 66% { 18 right: auto; 19 left: 0; 20 width: $dot-diameter; 21 } 22 100% { 23 right: auto; 24 left: $slack-size - $dot-diameter; 25 width: $dot-diameter; 26 } 27 } Не забываем подключить анимацию: 1 .c-slack__dot--b { 2 /* other styles */ 3 animation: slack-animation--b $duration infinite; 4 } Теперь делаем то же самое с точкой c: 01 @keyframes slack-animation--c { 02 0% { 03 bottom: 0; 04 top: auto; 05 height: $dot-diameter; 06 } 07 33% { 08 bottom: 0; 09 top: auto; 10 height: $slack-size; 11 } 12 34% { 13 bottom: auto; 14 top: -($slack-size - $slack-size); 15 height: $slack-size; 16 } 17 66% { 18 bottom: auto; 19 top: -($slack-size - $slack-size); 20 height: $dot-diameter; 21 } 22 100% { 23 bottom: auto; 24 top: $slack-size - $dot-diameter; 25 height: $dot-diameter; 26 } 27 } Подключаем анимацию для точки c: 1 .c-slack__dot--c { 2 /* other styles */ 3 animation: slack-animation--c $duration infinite; 4 } И наконец, точка d. Анимация: 01 @keyframes slack-animation--d { 02 0% { 03 left: 0; 04 right: auto; 05 width: $dot-diameter; 06 } 07 33% { 08 left: 0; 09 right: auto; 10 width: $slack-size; 11 } 12 34% { 13 left: auto; 14 right: -($slack-size - $slack-size); 15 width: $slack-size; 16 } 17 66% { 18 left: auto; 19 right: -($slack-size - $slack-size); 20 width: $dot-diameter; 21 } 22 100% { 23 left: auto; 24 right: $slack-size - $dot-diameter; 25 width: $dot-diameter; 26 } 27 } Подключаем анимацию: 1 .c-slack__dot--d { 2 /* other styles */ 3 animation: slack-animation--d $duration infinite; 4 } Теперь можем посмотреть результат в браузере: Перекрытие элементов Теперь нам необходимо сделать так чтобы элементы логотипа были немного смещены и перекрывали друг друга: 01 .c-slack__dot--a { 02 /* other styles */ 03 transform: translateX($dot-diameter); 04 } 05 06 .c-slack__dot--b { 07 /* other styles */ 08 transform: translateY($dot-diameter); 09 } 10 11 .c-slack__dot--c { 12 /* other styles */ 13 transform: translateX(-$dot-diameter); 14 } 15 16 .c-slack__dot--d { 17 /* other styles */ 18 transform: translateY(-$dot-diameter); 19 } Теперь результат будет таков: Поворот логотипа Теперь нам необходимо повернуть логотип на запланированное число градусов: 1 .c-slack { 2 /* other styles */ 3 transform: rotate(-$slack-angle); 4 } Результат: Режим отображения цвета Далее преобразуем режим отображения цвета элементов массива, в результате чего логотип становится полу-прозрачным: 1 .c-slack__dot { 2 /* other styles */ 3 mix-blend-mode: multiply; 4 } Финальный результат: