今天玩了一些css3,主要是过渡。
我想要实现的是,在 li 元素悬停时,背景将从左到右填充不同的颜色,理想情况下,我希望能够填充一半或全部。我已经开始了一个jsfiddle
我需要使用该物业吗
-vendor-prefix transition
谁能给我一些关于实现这一目标的指示。
谢谢
您需要在这里做的是使用线性渐变作为背景并为背景位置设置动画。在代码中:
使用线性渐变(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
至于-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>
悬停时的单个 CSS 代码可以解决问题:
box-shadow: inset 100px 0 0 0 #e0e0e0;
在我的小提琴中可以找到一个完整的演示:
如果您像我一样需要在填充背景颜色的同时更改文本本身的颜色,请检查我的解决方案。
创建步骤:
这个解决方案的好处:
这个解决方案不太好:
检查笔---> 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 修饰符。