html - div背景颜色，以缓慢改变悬停

我正试图在鼠标悬停时改变div的背景色。我想让背景像this spnashot
我在悬停时使用这个代码。我也希望当鼠标移过的时候颜色会慢慢改变

.header_col a:hover{
  background: -webkit-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
  background: -o-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
  background: -moz-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
  background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
  color: white!important;
}

最佳答案

希望这个代码能起作用

.header_col li {
  display:inline-block;
  transition: background 0.2s;
  transform: skew(20deg);  /* SKEW */

}
.header_col li a {
  display:block;
  text-decoration:none;
  color: black!important;
  transform: skew(-20deg); /* INVERSE SKEW */

}
.header_col li:hover{
  background: -webkit-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
  background: -o-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
  background: -moz-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
  background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
  color: white!important;
}
.header_col li a:hover{
   color: white!important;
}

<ul class="header_col">
	<li><a href="#">Page 1</a></li>
	<li><a href="#">Page 2</a></li>
	<li><a href="#">Page 3</a></li>
	<li><a href="#">Page 4</a></li>
	<li><a href="#">Page 5</a></li>
</ul>

关于html - div背景颜色，以缓慢改变悬停，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46370126/