CSS Icon move effect 🚀 #shorts #css #html #frontend #htmlcss #css3 #csshovereffect #html5

CSS Icon 🧿 move effect 🚀. Статичные иконки, которые не меняются при наведении выглядят не интересно. Сегодня мы рассмотрим просто, но эффективный способ сделать их более привлекательными. Разметка состоит из svg-спрайта, для группировки иконок. Сами иконки представлены как ссылки и кнопки, но вы так же можете использовать эти стили на любом другом теге. Внутри элементов находится скрытый текст, для доступности, а так же сама иконка, которая является ссылкой на svg-спрайт. Для класса .icon задаем необходимые стили. Ширина и высота элемента завязаны на размер текста и заданы в em. box-shadow задает круглую рамку вокруг элемента, которую также можно заменить border-ом. Размер иконки задан в процентах от родительского элемента. Далее идут анимации, которые и будут определять исчезновение и появление иконок. Анимаций четыре, которые задают движение иконки влево, вправо, вверх и вниз. При наведении на элементы - применяем анимацию к иконкам, а самому элементу добавл