Как плавно изменить цвет ссылки через CSS
 | |
| В этой статье узнаете, как можно сделать красивый эффект по плавному изменению цвета ссылки, что можно выставить любой оттенок при CSS. Это очень простой визуальный эффект, который можно увидеть как на большом интернет ресурсе, так на тематическом блоге. Безусловно он отличается от стандарта, хоть будет небольшая плавность появление, она сразу заметна. Сам процесс будет происходить за счет hover, который нужно будет добавить к селектору ссылки. Но нам нужен эффект, чтоб цветовая гамма появлялась плавно, то здесь необходимо выставить свойство transition, которое будет отвечать за скорость появление. Чем больше по знаку ставим, тем становится медленней, но значит меньше, тем быстрей будет появляться заданный стилистике цвет. Также изначально зададим ссылки палитру цвета, чтоб можно было ее видеть в описание. Отлично будет смотреться на темном формате, так как на нем безусловно яркие оттенки намного осмотрительно. На светлом формате по умолчанию задал синей оттенок, но когда вы наведете, то появится красный, но вы самостоятельно можете выставить палитру по своему дизайну. Приступаем к установки: Для начало сама ссылки или вывод под нее ключевых слов, здесь все по стандарту. Код <a href="/">Надпись будет плавно менять цвет</a> CSS Здесь после установки палитра цвета будет меняться медленно, но также зависит от разработчика, в свою очередь выставил transition:3s, это чем меньше, тем быстрей происходит эффект, здесь установлено на 3s, что явно будет видно замедление. Код a {color:#344cc7; transition:3s;} a:hover {color:#86170a;} Если рассматривать стандартное решение по смене палитры цвета ссылки, то оно будет тас в стилях CSS. Код a {color:#1d27af;} a:hover {color:#8a1010;} Плюс в том, что создавая такой эффект, вам не нужно, добавлять каких-либо дополнительные элементы через HTML. Также отлично подходят для браузеров, которые не поддерживают анимацию CSS, так как они должны в таком случай отображать подчеркивание. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |