从左到右填充背景颜色CSS

Question

从左到右填充背景颜色CSS

75

今天我在尝试使用一些CSS3，主要是过渡效果。

我想实现的是，在鼠标悬停在li元素上时，背景会从左至右填充成不同的颜色，最好能填充到一半或全部。我已经开始了一个jsfiddle。

我需要使用这个属性吗？

-vendor-prefix transition

有人能给我一些关于如何实现这个的指导吗？

谢谢。

- Richlewis

你是指像这样的东西吗？ http://www.htmldrive.net/items/demo/71/Dynamic-glide-navigation-with-jQuery-plugin - Nitesh

不，我希望被悬停的li元素从左到右填充不同的颜色。 - Richlewis

这个网站可以告诉你是否需要使用供应商前缀。对于Webkit浏览器，您需要使用Webkit前缀。 - jezzipin

1

我猜你想要类似于渐变的效果。如果是这样，那么这个链接可以帮到你：http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/ - Correia JPV

3个回答

39

在悬停时，单个CSS代码就可以完成此技巧：

box-shadow: inset 100px 0 0 0 #e0e0e0;

完整演示可在我的JSFiddle中找到：

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

- shuva mallick

聪明，我喜欢它。我不知道浏览器兼容性如何，但我喜欢它。 - armadadrive

4

我能立即看到的唯一问题是 100px 值需要硬编码，这样在多个宽度不同的元素之间使用该类会更加困难。 - armadadrive

1

它能工作，但是在动画效果中box-shadow是一种非常昂贵的属性（从系统资源的角度来看）https://csstriggers.com/box-shadow，同时设置`transition: all;也不是最好的选择。可以使用伪元素实现类似的效果：https://jsfiddle.net/f198x4bq/19/。通过在::before`上过渡变换和不透明度属性，以及在按钮上过渡颜色属性，可以实现相同的效果，并解决@armadadrive指出的问题。 - Phlame

这是最简单的一个，而且正是我一直在寻找的。 - Md. Amanur Rahman

3

如果您和我一样需要在同时填充背景颜色的情况下改变文本本身的颜色，请查看我的解决方案。

创建步骤：

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

此解决方案的优点：

1.支持IE9，仅使用transform。 2.按钮（或应用动画的元素）的宽度是流体的，因此这里不使用固定值。

此解决方案的缺点：

1.标记非常混乱，可以通过使用伪元素和att（data）来解决。 2.当有多个按钮相邻时，动画存在一些小故障，可能很容易解决，但我没有花太多时间去调查。

检查这支笔 --> 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 修饰符。

- Nikola Mitic

@MadaraUchiha 没问题，很高兴有人觉得这很有帮助。 - Nikola Mitic

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- beardhatcode · Accepted Answer

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

使用线性渐变（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，请参阅您问题下的评论。

额外说明：

如果您想要颜色中的“transition”效果，您可以将其宽度增加到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>