Question

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

我想要实现的是，在悬停一个li元素时，背景将从左到右填充不同的颜色，理想情况下我希望能够填充一半或一直..我已经开始一个jsfiddle

我是否需要使用该属性

-vendor-prefix transition

有人可以给我一些关于实现这一点的指示。

由于

Answer 1

您需要在此处执行的操作是使用线性渐变作为背景并为背景位置设置动画。在代码中：

使用线性渐变（50％红色，50％蓝色）并告诉浏览器背景是元素宽度的2倍（宽度：200％，高度：100％），然后告诉它将背景置于左侧

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

悬停时，将背景位置更改为right bottom，使用transition:all 2s ease;，位置会逐渐变化（linear强硬时更好） background-position：right bottom;

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

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

额外如果你想在颜色上有一个“过渡”，你可以使它的宽度为300％并使转换开始于34％（略高于1/3）并以65％结束（略低于2/3））。

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

Answer 2

悬停时的单个css代码可以解决这个问题： box-shadow: inset 100px 0 0 0 #e0e0e0;

可以在我的小提琴中找到完整的演示：

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

Answer 3

如果你像我一样，需要在改变背景颜色的同时改变文本本身的颜色，请检查我的解决方案。

创建步骤：

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

这个解决方案很好：

支持IE9，仅使用转换
按钮（或您正在应用动画的元素）的宽度是流动的，因此此处没有使用固定值

这个解决方案不太好：

一个非常混乱的标记，可以通过使用伪元素和att（数据）来解决吗？
动画中有一些小故障，当有一个按钮彼此相邻时，可能很容易解决，但我还没有花太多时间进行调查。

检查笔---＆gt; 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修饰符。

从左到右填充背景颜色CSS

3 个答案: