[英]Fill background color left to right CSS
Having a play around with some css3 today, transitions mainly.今天玩了一些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我想要实现的是,在 li 元素悬停时,背景将从左到右填充不同的颜色,理想情况下,我希望能够填充一半或全部......我已经开始了一个jsfiddle
Do i need to use the property我需要使用该物业吗
-vendor-prefix transition
Could anyone give me some pointers on achieving this please.任何人都可以给我一些关于实现这一点的指示。
Thanks谢谢
The thing you will need to do here is use a linear gradient as background and animate the background position.您需要在这里做的是使用线性渐变作为背景并为背景位置设置动画。 In code:
在代码中:
Use a linear gradient (50% red, 50% blue) and tell the browser that background is 2 times larger than the element's width (width:200%, height:100%), then tell it to position the background left.使用线性渐变(50% 红色,50% 蓝色)并告诉浏览器背景比元素的宽度大 2 倍(宽度:200%,高度:100%),然后告诉它把背景放在左边。
background: linear-gradient(to right, red 50%, blue 50%);
background-size: 200% 100%;
background-position:left bottom;
On hover, change the background position to right bottom
and with transition:all 2s ease;
在悬停时,将背景位置更改为
right bottom
并使用transition:all 2s ease;
, the position will change gradually (it's nicer with linear
tough) background-position:right bottom; ,位置会逐渐变化(
linear
强硬更好) background-position:right bottom;
http://jsfiddle.net/75Umu/3/ http://jsfiddle.net/75Umu/3/
As for the -vendor-prefix 'es, see the comments to your question至于-vendor-prefix 'es,请参阅对您的问题的评论
extra If you wish to have a "transition" in the colour, you can make it 300% width and make the transition start at 34% (a bit more than 1/3) and end at 65% (a bit less than 2/3).额外如果您希望在颜色中有一个“过渡”,您可以将其设置为 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>
A single css code on hover can do the trick: box-shadow: inset 100px 0 0 0 #e0e0e0;
悬停时的单个 css 代码可以解决问题:
box-shadow: inset 100px 0 0 0 #e0e0e0;
A complete demo can be found in my fiddle:可以在我的小提琴中找到完整的演示:
https://jsfiddle.net/shuvamallick/3o0h5oka/ https://jsfiddle.net/shuvamallick/3o0h5oka/
If you are like me and need to change color of text itself also while in the same time filling the background color check my solution.如果您像我一样并且需要在填充背景颜色的同时更改文本本身的颜色,请查看我的解决方案。
Steps to create:创建步骤:
Good thing about this solution:这个解决方案的好处:
Not so good thing about this solution:这个解决方案不太好:
Check the pen ---> https://codepen.io/nikolamitic/pen/vpNoNq检查笔 ---> 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%);
}
}
}
You can remove .btn--animation-from-right modifier if you want to animate to the left.如果要向左设置动画,可以删除 .btn--animation-from-right 修饰符。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.