Вначале сделаем html структуру проекта.
Родительский класс будет box, в котором будет класс логотипа logo.
Посмотрим на логотип instagram из чего он состоит.
Есть несколько цветов, которые будут переливаться на иконке.
Есть рамка фотоаппарата, объектив и точка в виде датчика фотоаппарата, три основных элемента.
Добавим эти классы в логотип.
- logo-border элемент рамка.
- logo-ring элемент кружок.
- logo-dot элемент точка.
Разметка готова, код html.
1 2 3 4 5 6 7 |
<div class="box"> <div class="logo"> <div class="logo-border"></div> <div class="logo-ring"></div> <div class="logo-dot"></div> </div> </div> |
Со стилями получится такая иконка.
Содержание статьи
Зададим переменные в var.sass.
У нас есть градиент под углом $corner: 45deg.
Теперь зададим три цвета для градиента.
- $fiol: #b641b0 фиолетовый цвет.
- $red: red красный цвет.
- $blue: #1f62e9 синий.
У логотипа будет анимация пять секунд $time: 5s.
Добавим переменную высоты $box: 300px и сделаем полоску, которая будет ездить вверх, вниз с градиентом и с свойством overflow: hidden, для эффекта изменения цветов у иконки $view: $box * 8.
На изображение есть полоска и скрыта.
Переменные в vars.sass.
1 2 3 4 5 6 7 |
$corner: 45deg $fiol: #b641b0 $red: red $blue: #1f62e9 $box: 300px $view: $box * 8 $time: 5s |
Пропишем стили css.
Начнем оформлять родительский класс box.
Зададим высоту и ширину переменной height: $box.
Чтобы не было видно фона, который будет ездить вверх и вниз зададим свойство overflow: hidden.
У иконки сделаем закругление border-radius: 45px.
Центрируем логотип влево и вверх по 50 процентов и margin-top: -$box/2 и влево также, делаем через переменную, чтобы при изменение размера элемента он находился все равно в центре.
Добавим фон элементов &:after с позицией position: relative, чтобы быть относительно другого блока.
Чтобы было видно параметр content: делаем пусрой.
Установим display: block и изначальные позиции влево и вверх ноль.
width: 100% фон будет на всю ширину.
Высота будет равна переменной $view.
Зададим фон линейным градиентом, вначале пишем угол градиента переменной $corner: 45deg, потом перечисляем все цвета с шагом 25 процентов background: linear-gradient ($corner, $fiol 0%, $red 25%, $blue 50%, $red 75%, $fiol 100%).
Появится иконка с градиентов в браузере.
Сделаем анимацию иконки instagram.
Добавим анимацию @keyframes для фона и назовем bg, на 0 и 100 процентах высота будет 0, на 50% сделаем отрицательную высоту.
Чтобы фон не уезжал за границы иконки top: $box — $view.
Теперь добавим анимацию к псевдоклассу &:after, у анимации первый параметр время анимации $time*2, умножаем на два, чтобы фон не так часто переливался цветами.
Зациклим анимацию infinite и установим равномерную linear.
animation: bg $time*2 infinite linear.
оформим класс логотипа logo.
Зададим для всех дивов > div общие свойства.
Это position: absolute, сверху и слева по 50 процентов.
Полоску внутри сделаем сплошной линией border: 15px solid #fff.
Чтобы все элементы были видны над полоской, которая будет ездить делаем z-index: 2.
- Сделаем рамку &-border высотой и шириной в 73 процента, будет белая полоска, которую мы задали для всех дивов. Закругление border-radius: 45px. Отступы сверху и слева сделаем минус 38 процентов, проверяем что рамка будет по чентру.
- Сделаем кружок &-ring и зададим 45 процентов от общий высоты и ширины. Сделаем круглым параметром border-radius: 10em. Делаем кружок по центру отступами минус 25 процентов.
- Оформим точку &.logo-dot датчика от фотоаппарата. Сделаем точку большего приоритета и привяжем к div. Можно уменьшить кружок border: 12px solid #fff. Радиус полностью круглый. Сделаем на высоте и ширине в 25 процентах. Поучится линия, кружок наследуем от родителя свойство, поэтому сбросим left: auto.
Все делается в процентах, чтобы при изменение размера логотипа все внутренние части увеличились в пропорции.
Пропишем @keyframes для элементов.
Общий временной интервал 100%, мы разобьем на временные отрезки анимацию каждого элемента и зададим свойства.
Для всего логотипа box установим анимацию.
- 0% Сделаем всю иконку невидимой transform: scale (0), радиус 45 градусов.
- 2% Появляется большая круглая иконка transform: scale (1.4) иborder-radius: 10em.
- 5% Иконка instagram вщзращается в исходное положение transform: scale (1).
- 95% Дальше не будет анимации пока пройдет анимация у внутренних элементов transform: scale (1) и углы border-radius: 45px.
- 98% Повторяем свойства, какие были на двух процентах.
- 100% Instagram пропадает transform: scale (0).
Применим анимацию к классу box.
Время сделаем подольше $time*2 , анимация зациклина и будет вперед и назад alternate, свойство animation: box $time*2 infinite alternate.
Сделаем анимацию внутренних элементов instagram.
1 Анимация рамки @keyframes border.
- 0% Вначале анимации рамка будет круглой border-radius: 10em и маленькой transform: scale (0). Элемент будет непрозрачный opacity: 0.
- 2% оставляем свойство непрозрачности на нуле.
- 15% Элемент будет виден opacity: 1, размер станет стандартный transform: scale (1) и закругление углов у рамку border-radius: 45px.
- 90% ждем анимацию других элементов, свойства будут такие же, как и на 15 процентах. В этом интервале одинаковая анимация.
Применяем анимацию к рамке animation: border $time infinite alternate.
2 Кружок в центре @keyframes ring.
- 0% вначале мы кружок не видим transform: scale (0).
- 5% появляется transform: scale (1) и непрозрачный opacity: 0.
- 10% Размер кружка увеличится transform: scale (1.5) и станет видимым opacity: 1.
- 15% Переходит в исходное состояние transform: scale (1).
- 95% transform: scale (1) и добавляем фон кружку, получится как вспышка фотоаппарата background-color: transparent.
- 98% Увеличим размер кружка transform: scale (1.3) и фон background-color: #FFF.
- 100% В исходном состоянии transform: scale (1).
Добавим анимацию классу ring animation: ring $time infinite alternate.
Осталось только добавить анимацию датчику фотоаппарата @keyframes dot.
- 0% opacity: 0 не видно точку.
- 20% В этом интервале не будет видно точки opacity: 0.
- 25% появляется opacity: 1.
- 75% точка видна.
- 100% Постепенно исчезает opacity: 0.
Добавим анимацию классу dot animation: dot $time infinite alternate.
Код main.sass
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 |
.box height: $box width: $box overflow: hidden border-radius: 45px position: absolute left: 50% top: 50% margin-top: -$box/2 margin-left: -$box/2 &:after position: relative content: '' display: block top: 0 left: 0 width: 100% height: $view background: linear-gradient($corner, $fiol 0%, $red 25%, $blue 50%, $red 75%, $fiol 100%) animation: bg $time*2 infinite linear @keyframes bg 0% top: 0 50% top: $box - $view 100% top: 0 .logo > div position: absolute top: 50% left: 50% border: 15px solid #fff z-index: 2 &.logo-dot border: 12px solid #fff border-radius: 10em right: 24% top: 24% left: auto &-border width: 73% height: 73% border-radius: 45px margin-top: -38% margin-left: -38% &-ring width: 45% height: 45% border-radius: 10em margin-top: -25% margin-left: -25% @keyframes box 0% transform: scale(0) border-radius: 45px 2% transform: scale(1.4) border-radius: 10em 5% transform: scale(1) border-radius: 45px 95% transform: scale(1) border-radius: 45px 98% transform: scale(1.4) border-radius: 10em 100% transform: scale(0) .box animation: box $time*2 infinite alternate @keyframes border 0% border-radius: 10em transform: scale(0) opacity: 0 3% opacity: 0 15% border-radius: 45px transform: scale(1) opacity: 1 90% border-radius: 45px transform: scale(1) .logo-border animation: border $time infinite alternate @keyframes ring 0% transform: scale(0) opacity: 0 5% transform: scale(1) opacity: 0 10% transform: scale(1.5) opacity: 1 15% transform: scale(1) 95% transform: scale(1) background-color: transparent 98% transform: scale(1.3) background-color: #FFF 100% transform: scale(1) .logo-ring animation: ring $time infinite alternate @keyframes dot 0% opacity: 0 20% opacity: 0 25% opacity: 1 75% opacity: 1 100% opacity: 0 .logo-dot animation: dot $time infinite alternate |