从左下角到右上角悬停时对角线过渡背景颜色

Question

我正在使用 this question 的答案中的技术，除了我想知道是否可以从左向右滑动背景颜色变化对角线 - 具体来说，从左下角到右上角？

我有这个 CSS 和 HTML 的菜单，例如：

.menu {
background: #1481C3;
color: white;
border-right: 1px solid #666666;
}

.menu ul.links {
list-style: none;
padding: 0;
}

.menu ul.links li {
border-bottom: 1px solid #0E99ED;
height: 64px;
line-height: 67px;
padding: 0 25px;
font-size: 15px;
background: linear-gradient(to right, #0E99ED 50%, #1481C3 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: all 0.2s ease;
}

.menu ul.links li:hover {
background-position: left bottom;
cursor: pointer;
}

<div class="menu">
      <ul class="links">
        <li class="home">
          <div id="home" class="menu-icon-container">
            <img class="menu-icon" src="/images/home-icon.png" />
          </div>
          <span>Home</span>
        </li>
        <li class="assignments">
          <div class="menu-icon-container">
            <img class="menu-icon" src="/images/assignments-icon.png" />
          </div>
          <span>Assignments</span>
        </li>
        <li class="proctoring">
          <div class="menu-icon-container">
            <img class="menu-icon" src="/images/proctoring-icon.png" />
          </div>
          <span>Proctoring</span>
        </li>
        <li class="reports">
          <div class="menu-icon-container">
            <img class="menu-icon" src="/images/reports-icon.png" />
          </div>
          <span>Reports</span>
        </li>
        <li class="administration">
          <div class="menu-icon-container">
            <img class="menu-icon" src="/images/administration-icon.png" />
          </div>
          <span>Administration</span>
        </li>
      </ul>
</div>

并且，为了使其水平，我尝试更改此 class

的样式

.menu ul.links li {
    background: linear-gradient(to top right, #0E99ED 50%, #1481C3 50%);
}

但这并不像预期的那样有效：link to jsFiddle

我需要 li 最初为 100% #0E99ED（浅蓝色），然后在悬停时为 100% #1481C3（深蓝色）。目前 ^ 最初占左下角的 25%，#0E99ED 悬停时仅占 li 总数的 75%。它需要在初始时为 0%，在悬停时为 100%。

关于如何解决这个问题有什么建议吗？

Answer 1

如果我理解正确的话，所有必要的就是增加开始 background-size 以便最初看不到渐变。

div {
  height: 100px;
  background-image: linear-gradient(45deg, blue 50%, lightblue 50%);
  background-size: 250% 100%;
  background-position: right bottom;
  transition: background-position .5s ease;
}

div:hover {
  background-position: left top;
}

<div></div>

从左下角到右上角悬停时对角线过渡背景颜色

Diagonally Transition Background Color on Hover From Bottom Left to Top Right

html

css

animation

transition

linear-gradients