代码之家 › 专栏 › 技术社区 › HappyHands31

从左下角到右上角对角变换悬停时的背景色

linear-gradients transition animation css html

HappyHands31 · 技术社区 · 5 年前

我用的是来自 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>

而且,为了成功 水平的 ,我试图改变这门课的风格

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

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

我需要 li 100% #0E99ED (浅蓝色)最初为100% #1481C3 (深蓝色)悬停。目前,^最初占据了左下角的25%左右 #0E99ED 仅占总数的75% 锂 悬停。初始值为0%,悬停时为100%。

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

0 回复 | 直到 5 年前

Paulie_D 5 年前

如果我理解正确的话,所有必要的是增加起动转速 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;
}