Анимация ссылок при наведении - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Анимация ссылок при наведении, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel HTML и CSS, Artikel web, Artikel блог, Artikel сайт, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Анимация ссылок при наведении
link : Анимация ссылок при наведении

Анимация ссылок при наведении

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

See the Pen ПОДЧЕРКНУТАЯ ССЫЛКА(abcinblog) by YaroslavW (@YaroslavW) on CodePen.

код очень простой:

HTML

<h2><a href="#">It is underlined link</a></h2>

CSS

h2 > a {
  position: relative;
  text-decoration: none;
  color:#000;
}
h2 > a:hover {
  color: red;
}
h2 > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: green;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: sczlaX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
h2 > a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

Для того, чтобы вам было проще ориентироваться в коде, что там за что отвечает и пр., я выделил все разными цветами.                                                                                                                                                              

Demikianlah Artikel Анимация ссылок при наведении

Sekianlah artikel Анимация ссылок при наведении kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Анимация ссылок при наведении dengan alamat link https://dev-create.blogspot.com/2017/04/blog-post_21.html