Вероятно много раз вам приходилось сталкиваться с сайтами, где при наведении на ссылку вы обнаруживали мягкую цветную анимацию, изменяющую цвет ссылки. При наведении ссылки идет оттенок цвета этой ссылки за короткий промежуток времени станет другим, вместо немедленного изменения. Такая мягкая анимация гораздо более приятна, чем мгновенное переключение цветов, которое выглядит неожиданно.
Цветная анимация на Link Hover в плавном эффекте
Здесь вам не требуется JavaScript для создания таких эффектов. Простой переход CSS, определенный для цвета при наведении ссылки, создаст эту мягкую анимацию. Вот фрагмент кода CSS, который я использую, чтобы определить их в своих веб-проектах.
HTML
Код
<a href="http://zornet.ru/load/81">Скрипты для uCoz</a>
<br/>
<a class="soft-link" href="http://zornet.ru/load/142" target="_blank">Шаблоны для uCoz</a>
<br/>
<a class="soft-link" href="http://zornet.ru">ZorNet.Ru — сайт для вебмастера</a>
<br/>
<!-- Read the blog post -->
<a class="soft-link" href="http://zornet.ru/load/85" target="_blank">Всплывающие окна Ajax</a>
CSS
Код
a {
color: #1bc5a4;
font-size: 21px;
font-weight: 700;
line-height: 1.685;
font-family: 'Open Sans', sans-serif;
text-decoration: none;
}
.animatoved {
-webkit-transition: color .5s linear;
-moz-transition: color .5s linear;
-ms-transition: color .5s linear;
-o-transition: color .5s linear;
transition: color .5s linear;
}
a:hover {
color: #d82714;
}
Делая это, мы говорим браузеру постепенно менять цвет ссылки с Зеленого моря # 16a085 на Alizarin # e74c3c, в течение 0,5 секунд. Вы можете поиграть со временем, чтобы достичь желаемого эффекта, однако я предлагаю не делать это слишком медленно.
Вы можете увидеть этот код в действии в кодовой ручке, вставленной ниже. Обратите внимание, что здесь задействован отдельный класс CSS, чтобы показать разницу между наведением ссылки по умолчанию и эффектом наведения ссылки при применении перехода.
Перейдя на demo страницу, то можно проверить, вед первая ссылка с ключевыми словами не подключена.
Демонстрация
