从左到右填充 CSS 背景色

今天有一些 css3的游戏，主要是过渡。

What i would like to achieve is that upon hover of an li element the background will fill from left to right with a different colour, ideally i would like to be able to fill half way or all the way.. I have started a Jsfiddle

我是否需要使用

-vendor-prefix transition

有人能给我一些实现这个目标的建议吗。

谢谢

205673 次浏览
小开
最佳答案

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

使用一个线性渐变(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/

至于 - 供应商-前缀，请看对你的问题的评论

额外资料 :

如果你希望有一个“过渡”的颜色，你可以让它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>

小开

悬停时使用一个 css 代码就可以解决这个问题: box-shadow: inset 100px 0 0 0 #e0e0e0;

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

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

小开

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

创建步骤:

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

这个解决方案的好处是:

  • 支持 IE9，仅使用转换
  • 按钮(或您正在应用动画的元素)的宽度是流动的，所以这里没有使用固定的值

这个解决方案不太好:

  • 一个非常混乱的标记，可以通过使用伪元素和 att (数据)来解决吗？
  • 动画中有一些小故障，当有一个以上的按钮相邻，也许它可以很容易地解决，但我没有花太多的时间来研究。

检查笔-> 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 修饰符，如果您希望动画向左移动。


提交答案