让动画悬停像过渡悬停
问题描述:
我想灰色变成绿色,然后旱厕时,我的元素是悬停 ,当鼠标走出元素:
如果我的元素是绿色转到灰色
如果我的elemnt是水绿色然后灰色
更准确我想做转换但是对于3种颜色
当我们使用转换2色 结果很大,当鼠标元件出现故障时,颜色变化渐变为第一个像灰色 但动画时鼠标走出元素颜色非常快变灰
什么是解决方案?让动画悬停像过渡悬停
这是我的代码,但不工作。
@keyframes test {
0% {
background: gray;
}
50% {
background: green;
}
100% {
background: aqua;
}
}
@keyframes test1 {
0% {
background: aqua;
}
50% {
background: green;
}
100% {
background: gray;
}
}
.one {
width: 300px;
height: 300px;
margin: 50px auto;
background: gray;
animation: test1 2s;
}
.one:hover {
animation: test 2s alternate;
animation-fill-mode: forwards;
}
<div class="one"></div>
答
你可以使用一个:before
伪元素覆盖的背景。如果您将元素的不透明度设置为默认值0,并将其设置为:hover
,则可以使用transition-delay
在完成第一次转换时显示第二次转换。通过覆盖:hover
上的transition-delay
,您可以确保“mouseleave”也正常工作。
像这样(在FireFox只测试):
.one {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
background-color: gray;
transition: background-color 1s linear 1s;
}
.one:before {
content: "";
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color: aqua;
opacity: 0;
transition: opacity 1s linear;
}
.one:hover {
background-color: green;
transition-delay: 0s;
}
.one:hover:before {
opacity: 1;
transition-delay: 1s;
}
<div class="one"></div>
答
可以设置背景的梯度和动画梯度位置
.test {
width: 300px;
height: 200px;
background-size: 90000px 100%;
background-image: linear-gradient(90deg, gray, green, aqua);
background-position: 0% 0%;
transition: background-position 2s;
}
.test:hover {
background-position: 100% 0%;
}
<div class="test"></div>
你介意使用额外的元素吗?所以你可以让外部元素从灰色变成绿色,内部元素从绿色变成蓝色? – BillyNate