Привет!
Запускаем новую рубрику для тех, кто увлекается html версткой - [СSS Animation].
Сегодня делимся с вами простой анимацией соц. иконок (кнопок) при наведении:
Для этого урока нам понадобятся три иконки. Можно использовать свои, но если хочешь такие же как в примере, то они лежат тут.
Поехали!
1. Прописываем html:
2. Установим переменные, чтобы проще было управлять элементами:
3. Для удобства элементу <body> установим стили, чтобы все наши элементы располагались по центру.
4. Для ссылок .social-links__item зададим ширину и высоту:
5. Туда же добавим границу в один пиксель:
6. Добавим относительное позиционирование, чтобы ссылки можно было перемещать:
7. Так же добавим непрозрачность:
8. Для плавной анимации добавим правила для перехода:
С классом .social-links__item закончили.
9. Выровняем элементы в ряд друг за другом.
10. Для класса .social-links__border добавим прозрачную рамку, чтобы элементы не прыгали при наведении. Добавим отступ слева и справа, чтобы отделить элементы друг от друга. А так же правила для перехода:
11. При наведении будет менять цвет рамки:
12. Теперь добавим картинки для ссылок и цвет, чтобы перекрыть рамку от элемента с классом .social-links__border:
13. Нам так же понадобиться правила для анимации при наведении:
14. Осталось только добавить стили для ссылок при наведении:
На этом все! Наша css анимация готова!
Если данный урок был полезен, ставь лайк!
Напиши в комментариях все ли понятно было? Или стоит записать видео?
P.S.: А здесь можно забрать готовый код.