67

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

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

我需要使用该物业吗

-vendor-prefix transition 

谁能给我一些关于实现这一目标的指示。

谢谢

4

3 回答 3

163

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

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

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

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

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

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

额外 如果您希望在颜色中有一个“过渡”,您可以将其设置为 300% 宽度,并使过渡从 34%(略大于 1/3)开始并以 65%(略小于 2/ 3)。

background: linear-gradient(to right, red 34%, blue 65%);
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>

于 2013-06-20T11:28:37.327 回答
35

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

在我的小提琴中可以找到一个完整的演示:

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

于 2016-04-21T13:18:57.177 回答
2

如果您像我一样需要在填充背景颜色的同时更改文本本身的颜色,请检查我的解决方案。

创建步骤:

  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 修饰符。

于 2017-12-17T17:10:01.623 回答