ZorNet.Ru — сайт для вебмастера » HTML и CSS » Мягкая анимация при наведении ссылки на CSS

Мягкая анимация при наведении ссылки на CSS

Здесь создаем мягкую цветовую анимацию при наведении на ссылку или текст который под ней стоит, что отличает визуально от стандарта. Безусловно вы множество раз сталкивались на интернет ресурсах, где находили аналогичную цветопередачу, чтобы изменить оттенок ссылки, но больше всего все по стандарту, это быстрое изменение или подчеркивание. При перемещении урла цвет будет исчезать в другой цвет в течение короткого времени, с некой небольшой затяжкой, а не сразу меняться.

Такой оригинальный эффект намного более успокаивает чем мгновенный переключатель цвета, который выглядит круто для глаз. Хотя это на любителя, где-то нужно, чтоб все было резко, где-то можно поставить этот эффект, который смену палитры немного затянет, но не так сильно, но будет заметно, где влиять не будет на работоспособность.

Для создания таких переходов вам не нужен JavaScript. Все производится на чистых стилях CSS, определенный для палитры при наведении на ссылки приведет к этой мягкой анимации. Что можно поставить на некоторые тематические ресурсы. Что будет представлена 2 варианта, это на прямую под каждую поставленный урл, если хотите сами выставить в какой, то статье или мануале, на выбор.

1. вариант:

HTML

Код

<a href="http://zornet.ru/load/81" target="_blank">Скрипты для uCoz</a>

CSS:

Код

a {
  color: #3a5fa5;
  -webkit-transition: color .5s cubic-bezier(0, 0, 0.78, 0.98);
  -moz-transition: color .5s linear;
  -ms-transition: color .5s linear;
  -o-transition: color .5s linear;
  transition: color .5s cubic-bezier(0, 0, 0.82, 0.94);
}

a:hover { color: #8e4417; }

Подобно применению эффектов перехода на цвета при наведении на связь вы можете применять их и по другим атрибутам, таким как фоновый цвет.

Демонстрация:

2. вариант:

HTML

Код

<a href="http://zornet.ru/load/142" target="_blank" class="denimeka">Шаблоны для uCoz</a>

CSS:

Код

.denimeka {
  color: #850f86;
  -webkit-transition: color .5s cubic-bezier(0, 0, 0.42, 0.82);
  -moz-transition: color .5s linear;
  -ms-transition: color .5s linear;
  -o-transition: color .5s linear;
  transition: color .5s cubic-bezier(0, 0, 0.76, 0.54);
  font-weight: bold;
}

.denimeka:hover { color: #207d10;font-weight: bold;}

a {
  text-decoration: none; /* Отменяем подчеркивание у ссылки */
  }

По умолчанию в стилях поставлено на 0.5 секунд, что вы можете играть со значением времени для достижения желаемого эффекта, однако предлагаю не делать это слишком медленно.

Демонстрация:

21 Декабря 2017 Просмотров: 2142 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0