从左到右填充背景色CSS

Question

今天玩了一些css3，主要是过渡。

我想要实现的是，在一个li元素的悬停时，背景将从左到右用不同的颜色填充，理想情况下，我希望能够填充一半或所有的方式。我已经启动了一个jsfiddle

我需要使用

属性吗?

-vendor-prefix transition 

谁能给我一些实现这一目标的指导?

谢谢

Answer 1

这里你需要做的是使用线性渐变作为背景，并使背景位置动画化。在代码:

使用线性渐变(50%红，50%蓝)，并告诉浏览器背景是元素宽度的2倍(宽度:200%，高度:100%)，然后告诉它将背景定位在右边。

background: linear-gradient(to left, red 50%, blue 50%) right;
background-size: 200% 100%;

悬停时，将背景位置改为left，随着transition:all 2s ease;的增加，背景位置逐渐变化(linear的效果更好)

background-position: left;

http://jsfiddle.net/75Umu/3/

至于-vendor-prefix，请参阅对您的问题的评论

额外

:

如果你想有一个"过渡"在颜色上，你可以设置宽度为300%，过渡开始为34%(略大于1/3)，结束为65%(略小于2/3)。

background: linear-gradient(to left, red 34%, blue 65%) right;
background-size: 300% 100%;

演示:

div {
    font: 22px Arial;
    display: inline-block;
    padding: 1em 2em;
    text-align: center;
    color: white;
    background: red; /* default color */
    /* "to left" / "to right" - affects initial color */
    background: linear-gradient(to left, salmon 50%, lightblue 50%) right;
    background-size: 200%;
    transition: .5s ease-out;
}
div:hover {
    background-position: left;
}

<div>Hover me</div>

Answer 2

一个单独的css代码就可以达到这个效果:box-shadow: inset 100px 0 0 0 #e0e0e0;

完整的演示可以在my fiddle中找到:

https://jsfiddle.net/shuvamallick/3o0h5oka/

Answer 3

如果你像我一样，需要改变文本本身的颜色，同时填充背景色，看看我的解决方案。

创建步骤:

1. 有两个文本，一个是静态的悬停时的颜色，另一个是默认状态的颜色，你将在悬停时移动
2. 在悬停时移动非静态文本的包装，同时将该包装的内部文本向相反方向移动。
3. 确保在需要的地方添加溢出隐藏

这个解决方案的优点:

• 支持IE9，只使用transform
• 按钮(或你正在应用动画的元素)的宽度是可变的，所以这里没有使用固定的值

这个解决方案有一个不好的地方:

一个真正混乱的标记，可以通过使用伪元素和att(data)来解决吗?
• 在动画中有一些小故障，当有多个按钮彼此相邻时，也许它可以很容易地解决，但我没有花太多时间去调查。

检查笔--> https://codepen.io/nikolamitic/pen/vpNoNq

<button class="btn btn--animation-from-right">
  <span class="btn__text-static">Cover left</span>
  <div class="btn__text-dynamic">
    <span class="btn__text-dynamic-inner">Cover left</span>
  </div>
</button>
.btn {
  padding: 10px 20px;
  position: relative;
  border: 2px solid #222;
  color: #fff;
  background-color: #222;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-transform: uppercase;
  font-family: monospace;
  letter-spacing: -1px;
  [class^="btn__text"] {
    font-size: 24px;
  }
  .btn__text-dynamic,
  .btn__text-dynamic-inner {    
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: 2;
    transition: all ease 0.5s;
  }
  .btn__text-dynamic {
    background-color: #fff;
    color: #222;
    overflow: hidden;
  }
  &:hover {
    .btn__text-dynamic {
      transform: translateX(-100%);
    }
    .btn__text-dynamic-inner {
      transform: translateX(100%);
    }
  }
}
.btn--animation-from-right {
    &:hover {
    .btn__text-dynamic {
      transform: translateX(100%);
    }
    .btn__text-dynamic-inner {
      transform: translateX(-100%);
    }
  }
}

如果你想让动画向左移动，可以移除。btn——animation-from-right修饰符