Как показала практика, на чистом 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), где
- rotate - поворот элемента на заданный угол относительно точки трансформации
- skew - наклоняет элемент на заданный угол
- потом надо сами иконки увеличить. Это происходит в "ul li span"
- дальше нужно "отнестись" к span и путем смещения сдвинуть картинки + задать им прозрачность (для красоты)
- далее все логично - добавляем цвета☻ Готово! Пользуйтесь ))
В окончание добавлю - добавьте тени... вот отрывок кода, короче