css - 如何在背景图像过渡中滑动？

Question

我有一个列表设置。我想要做的是，当您将鼠标悬停在列表项上时，会出现以下背景图像。

我想做的是添加一个效果，由于背景图像是一种渐变形式，我希望它从左向右滑动。

我在谷歌上找不到这方面的资源。

我当前的 CSS 是:

.menu-item {
  list-style: none;
  margin-bottom: 1.5em;
  padding-left: 2em;
  width: 100%;
  height: 35px;
  transition: all 0.2s ease-in;
}
.menu-item:hover {
  background: url(../img/menu-hover-bg.png) no-repeat left;
}
.menu-item a {
  padding-top: 0.5em;
  color: #ffffff;
  text-transform: uppercase;
  display: block;
}

我还制作了一个 JSFiddle我现在拥有的东西。

Answer 1

你可以像这样玩背景大小:

#sidebar {
  padding-top: 2em;
  padding-bottom: 2em;
  background: #21203d;
}

.menu-item {
  list-style: none;
  margin-bottom: 1.5em;
  padding-left: 2em;
  width: 100%;
  height: 35px;
  background-image: url(/image/jMwI7.png);
  background-repeat: no-repeat;
  background-position: left;
  background-size: 0 100%;
  transition: all 0.2s ease-in;
}

.menu-item:hover {
  background-size: 200px 100%;
}

.menu-item a {
  padding-top: 0.5em;
  color: white;
  text-transform: uppercase;
  display: block;
  text-decoration: none;
}

<div id="sidebar">
  <ul id="menu" class="main-menu">
    <li class="menu-item">
      <a href="/"><span class="hover-large"></span>Home</a>
    </li>
    <li class="menu-item">
      <a href="/"><span class="hover-large"></span>News</a>
    </li>
    <li class="menu-item">
      <a href="/"><span class="hover-large"></span>Our Team</a>
    </li>
    <li class="menu-item">
      <a href="/"><span class="hover-large"></span>Fixtures</a>
    </li>
  </ul>
</div>

您还可以在不使用图像的情况下轻松地重新创建此背景，并且您可以获得更复杂的动画:

#sidebar {
  padding-top: 2em;
  padding-bottom: 2em;
  background: #21203d;
}

.menu-item {
  list-style: none;
  margin-bottom: 1.5em;
  padding-left: 2em;
  width: 100%;
  height: 35px;
  background-image: 
  linear-gradient(#f13c4a,#f13c4a),
  linear-gradient(to right,black,transparent);
  background-repeat: no-repeat;
  background-position: left;
  background-size:  5px 0%,0 100%;
  transition: all 0.2s ease-in;
}

.menu-item:hover {
  background-size: 4px 100%,200px 100%;
}

.menu-item a {
  padding-top: 0.5em;
  color: white;
  text-transform: uppercase;
  display: block;
  text-decoration: none;
}

<div id="sidebar">
  <ul id="menu" class="main-menu">
    <li class="menu-item">
      <a href="/"><span class="hover-large"></span>Home</a>
    </li>
    <li class="menu-item">
      <a href="/"><span class="hover-large"></span>News</a>
    </li>
    <li class="menu-item">
      <a href="/"><span class="hover-large"></span>Our Team</a>
    </li>
    <li class="menu-item">
      <a href="/"><span class="hover-large"></span>Fixtures</a>
    </li>
  </ul>
</div>