ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект на 2 варианта подчеркивания ссылки CSS

Эффект на 2 варианта подчеркивания ссылки CSS

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

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

Приступаем к установке:

Первый вариант:

Анимация ссылок css

HTML

Код

<div class="kexceptionaly_exciting">
<p><a href="#">ZorNet.Ru: Портал Вебмастера</a></p>
</div>

CSS

Код

.kexceptionaly_exciting a {
  color: #1c69b7;
  text-decoration: none;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  display: inline-block;
}

.kexceptionaly_exciting a:hover {
  color: #2367a0;
  text-decoration:none;
}

.kexceptionaly_exciting a:after {
  display: block;
  content: "";
  height: 1.3px;
  width: 0%;
  background-color: #1c6fc1;
  transition: width 0.5s ease-in-out;
}

.kexceptionaly_exciting a:hover:after,
.kexceptionaly_exciting a:focus:after {
  width: 100%;
}

Возможно этот формат эффекта подчеркивание, более популярен, чем другие.

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

Второй вариант:

Анимированное подчеркивание css

HTML

Код

<div class="aclarifiedat_wentuwrong ">
<p><a href="http://zornet.ru">Интересные решения вебмастеру</a></p>
</div>

CSS

Код

.aclarifiedat_wentuwrong a {
  color: #1b1a1a;
  text-decoration: none;
  position: relative;
  display: inline-block;
}
.aclarifiedat_wentuwrong a:hover {
  text-decoration:none;
}

.aclarifiedat_wentuwrong a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(245, 242, 242, 0.3), rgba(247, 241, 241, 0.38)) no-repeat 100% 0%;
  background-size: 100% 100%;
}

.aclarifiedat_wentuwrong a:hover::before,
.aclarifiedat_wentuwrong a:focus::before {
  transition: 0.4s linear;
  background-size: 0 100%;
}
.aclarifiedat_wentuwrong a::after {
  position: absolute;
  display: block;
  content: "";
  height: 1.3px;
  width: 100%;
  background-color: #2176cc;
  transition: width 0.4s ease-in-out;
}
.aclarifiedat_wentuwrong a:hover::after,
.aclarifiedat_wentuwrong a:focus::after {
  width: 0%;
  right:0;
  }

Очень интересный эффект, который работает на ссылки по эффекту, только совершенно наоборот.

Что больше под блог подойдет, а точнее, где больше описание будет, так как, если смотреть по заметности, то отлично все показывает, что сразу видно, где что выставлено.

Не нужно забывать, что после как вы все установите, вы уже сами самостоятельно выстраиваете свою композицию, но если вам нужно. Это смена палитры цвета, также полная изменение скоростного режима появление подчеркивания.

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

03 Июля 2018 Просмотров: 1238 Комментариев: (0)

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

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

Kosten

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