javascript - 如何为具有多种颜色的导航栏实现淡入淡出的颜色混合

Question

亲爱的社区，我正在尝试查找这种着色类型的调用方式以及如何实现它(请参阅所附图像 - 多边形导航栏)。我可能需要 CSS 或 Javascript，但我不知道如何搜索它。有人可以帮我吗？

提前谢谢你

Answer 1

检查下面的代码，也许你需要使用background-blend-mode属性。

.nav{
  height: 50px;
  width: 100%;
  background-image: linear-gradient(to right, #0000FF, #FF0000);
  background-image: -o-linear-gradient(right, #0000FF, #FF0000);
  background-image: -moz-linear-gradient(right, #0000FF, #FF0000);
  background-image: -webkit-linear-gradient(left, #0000FF, #FF0000);
  background-blend-mode: multiply;
}

.nav ul li{
  list-style-type: none;
  float: left;
  padding: 15px 20px;
  color: #FFFFFF;
  font-family: 'Arial';
}

<div class="nav">
  <ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
    <li>Menu 5</li>
  </ul>
</div