Найти в Дзене
FhataWuck

Супер анимация при помощи CSS

Как показала практика, на чистом css можно сделать кучу интересного. Вот, например, анимация иконок социальных сетей. Это можно впихнуть в свое портфолио (которое будет никому не нужно ))) Такова жизнь, но сделать надо) Опять таки, вот код (уже готовый) если лень писать самому HTML Сам html не такой и большой, нужно сделать гнезда для иконок. Икон, к слову найти можно здесь. Чисто нужный сайт. Введите facebook или vk и вылезет то, что нужно. Я взял для ок, ютуба, вк и инсты. Все это можно по emmet: ul>a>span*5. Только имейте ввиду, что в теге ul будет столько li, сколько иконок вам надо анимировать. У меня 4 их. CSS Теперь сладкое - анимация. Прикол в том, что: В окончание добавлю - добавьте тени... вот отрывок кода, короче Подписывайтесь, лайкайте и задавайте вопросы в комменты или же просто скажите автору "спасибо :э"
Оглавление
Анимация
Анимация

Как показала практика, на чистом css можно сделать кучу интересного. Вот, например, анимация иконок социальных сетей. Это можно впихнуть в свое портфолио (которое будет никому не нужно ))) Такова жизнь, но сделать надо)

Опять таки, вот код (уже готовый) если лень писать самому

HTML

Сам html не такой и большой, нужно сделать гнезда для иконок. Икон, к слову найти можно здесь. Чисто нужный сайт. Введите facebook или vk и вылезет то, что нужно. Я взял для ок, ютуба, вк и инсты.

код
код

Все это можно по emmet: ul>a>span*5. Только имейте ввиду, что в теге ul будет столько li, сколько иконок вам надо анимировать. У меня 4 их.

CSS

Теперь сладкое - анимация. Прикол в том, что:

  • надо сначала повернуть иконки в плоскости. Это сделаем через transform: rotate(-30deg) skew(25deg), где
  1. rotate - поворот элемента на заданный угол относительно точки трансформации
  2. skew - наклоняет элемент на заданный угол
код
код
  • потом надо сами иконки увеличить. Это происходит в "ul li span"
  • дальше нужно "отнестись" к span и путем смещения сдвинуть картинки + задать им прозрачность (для красоты)
опять код, ххехехехех
опять код, ххехехехех
  • далее все логично - добавляем цвета☻ Готово! Пользуйтесь ))
кодддд
кодддд
результат
результат

В окончание добавлю - добавьте тени... вот отрывок кода, короче

тени
тени

Подписывайтесь, лайкайте и задавайте вопросы в комменты или же просто скажите автору "спасибо :э"