Сентябрь 2017
Автор: Рубрика: Верстка Комментариев нет

Анимация кнопки и логотипа для lending

Анимация кнопки и логотипа для lending

Создаем кнопку с классом btn и ссылкой.

Внутри первый блок item1 с названием форма.

Затем картинка для анимации при наведении на кнопку и второй блок item2, который будет выезжать справа с названием заказать звонок.

В итоге получится такая кнопка.

Анимация кнопки gif

Получился код в html.

Стилизуем кнопку с анимацией.

Наложим стили на каждый класс кнопки.

  1. Копка btn занимает в ширину пространства в 350 пикселей, высота будет 80. Позиционирование будет position: relative, чтобы другие блоки позиционировать относительно границ кнопки. Это будет родительский элемент. Два блока item1 и item2 будут дочерними с position: absolute.
  2. item1 будет фиолетового цвета. Такие же размеры как у кнопки. position: absolute и выравниваем по вертикали текст line-height: 80px. Закруглим края у кнопки border-radius: 10em. Чтобы кнопка была видна, установим z-index: 2. Сразу добавим анимацию при наведении transition: 1s.
  3. У второго класса item2 сделаем синий цвет и абсолютное позиционирование, это состояние элемента когда другие элементы перестают на него влиять и позиция выставляется относительно краев браузера или родительского элемента. Ширину сделаем поменьше width: 150px. Чтобы этот элемент был под первым блокам установим z-index: 1. Закруглим углы с правой стороны border-radius: 0 40px 40px 0
  4. Добавим сверху картинку img. Чтобы ее видеть над первым блоком добавим z-index: 3. Это дочерний элемент в позиционировании у кнопки, поэтому position: absolute. Свойствами left: 15px и top: 15px регулируем относительного другого блока положение иконки. transition: 1.5s для анимации иконки.
  5. При наведении на кнопку btn:hover у класса item1 блок будет уменьшаться по ширине до width: 200px. Так как блок станет меньше, то и шрифт выставим font-size: 2em. Выпрямим левые углы border-radius: 40px 0 0 40px.
  6. Делаем анимацию иконки img.pic, переворачивая ее на 360 градусов transform: rotate (360deg).

Стили.

Стилизуем кнопку с анимацией.

Анимация фона при наведении мышкой.

Анимация логотипа gif

Сделаем структуру в html.

Добавим див с классом box.

Внутри будет круг с классом circle и span с названием логотип.

Добавим стили.

  • У первого дива box ширина будет 300px, отступ сверху и снизу будет 20 пикселей, а по бокам посередине margin: 20px auto. Расстояние от круга будет padding: 20px. Обведем box полоской фиолетового цвета и зальем фон серым background-color: #c3c3c3.
  • Оформим кружок circle. Фон будет синий с размерами по 200 пикселей. Чтобы сделать надпись по середине зададим свойство line-height: 200px. Закругляем углы border-radius: 50%. У текста установим размер и тень text-shadow: 2px 2px 2px #b641b0.
  • Нарисуем второй кружок с помощью псевдоэлемента &:after с обязательным свойством content. Размеры будет как у основного круга, цвет зададим фиолетовый. Чтобы круг, стал виден добавим display: block. Разместим элемент установим сверху и слева top: 0, left: 0. Чтобы свойства элемента отталкивались от круга circle, добавим position: relative. Теперь установим выше текст, добавим z-index: 2 у span и osition: relative. Также чтобы элемент &:after был выше круга, добавим z-index: 1.

Добавляем анимацию при наведении.

При наведении hover на класс circle псевдоэлемент after будет меняться ширина и высота будет ноль.

Добавим transition: .5s width, .5s height. Чтобы центрировать пропадание поделим размер круга пополам top: 100px.

Сделаем размытые края с помощью свойства filter: blur (10px).

Второй способ размытия применить тень 15 пикселей сама тень и плотность тени 15 пикселей, чтобы тень была внутри, добавим inset.

Добавляем анимацию при наведении для логотипа

Комментариев нет

Комментарии:

Комментарии запрещены