Анимация подчеркивания ссылки с 3 различными цветами - PullRequest
Новая
       11

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

0 голосов
/ 29 сентября 2018

Я пытаюсь анимировать свои ссылки на событии при наведении на них тремя разными цветами, но я застреваю, как действовать дальше.Я пытался использовать свойство линейного градиента, но, похоже, его невозможно анимировать (?)

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

var link = document.querySelector(".dropdown-item");

['mouseover', 'touchstart'].forEach(function (e) {
	link.addEventListener(e, function () {
		link.classList.add("is-active");
	});
});
	
['mouseleave', 'touchleave'].forEach(function (e) {
	link.addEventListener(e, function () {
		link.classList.remove("is-active");
	})
});
li {
  list-style: none;
}

.dropdown-item::after {
	content: '';
	margin: auto;
	padding: 0 10px;
	height: 2px;
	width: 0;
	position: relative;
	bottom: -10px;
	border: 2px solid transparent;
	display: block;
	transition: 0.3s;
}

.is-active.dropdown-item::after {
	width: 100%;
	background: #123456;
	transition: width 0.3;
}
<ul>
  <li><a class="dropdown-item" href="#">EXAMPLE</a></li>
</ul>

И вот что я хотел бы сделать, с тем же эффектом перехода:

Результат

Кто-нибудь знает, как поступить?

Спасибо

1 Ответ

0 голосов
/ 29 сентября 2018

Можно рассмотреть градиент и несколько фонов: 

li {
  list-style: none;
}

.dropdown-item {
  padding: 20px 10px;
  border: 2px solid transparent;
  display: block;
  transition: 0.3s;
  background-image: 
    linear-gradient(red, red), 
    linear-gradient(blue, blue), 
    linear-gradient(green, green);
  background-size: 0 10px;
  background-position: bottom left;
  background-repeat: no-repeat;
}

.dropdown-item:hover {
  background-size: 
    33%  10px, 
    66%  10px, 
    100% 10px;
}
<ul>
  <li><a class="dropdown-item" href="#">EXAMPLE</a></li>
</ul>

Вот еще один способ сделать: 

li {
  list-style: none;
}

.dropdown-item {
  padding: 20px 10px;
  border: 2px solid transparent;
  display: block;
  transition: 0.3s;
  background-image: 
    linear-gradient(to right, red 33%,green 33%,green 66%,blue 0);
  background-size: 0 10px;
  background-position: bottom center;
  background-repeat: no-repeat;
}

.dropdown-item:hover {
  background-size: 100% 10px; 
}
<ul>
  <li><a class="dropdown-item" href="#">EXAMPLE</a></li>
</ul>
...