我有一个带有动画悬停效果的按钮,背景会一起滑动,然后当鼠标离开时,它会垂直分割并移动到顶部/底部。我不知道如何获得它,以便当鼠标离开背景时,背景会反转,并且两半回到侧面而不是顶部和底部?
这是驱动它的 CSS:
.bannerbuttonV1 {
--cblack: #282828; /* the color*/
--_p: 0%;
box-shadow: 0 0 0 .1em inset var(--cblack);
--_g: linear-gradient(var(--cblack) 0 0) no-repeat;
background:
var(--_g) calc(var(--_p,0%) - 100%) 0%,
var(--_g) calc(200% - var(--_p,0%)) 0%,
var(--_g) calc(var(--_p,0%) - 100%) 100%,
var(--_g) calc(200% - var(--_p,0%)) 100%;
background-size: 50.5% calc(var(--_p,0%)/2 + .5%);
outline-offset: .1em;
transition: background-size .4s, background-position 0s .4s, color .4s;
}
.bannerbuttonV1:hover {
--_p: 100%;
color:#fff;
transition: background-position .4s, background-size 0s;
}
这是一个例子: https://codepen.io/Mark-Edlington/pen/JjVWVWB
我在网上找到了这段代码,并对其进行了一些修改,如果有人知道更好的方法来实现这一目标,那么我会洗耳恭听。我确定我只需要使用 2 条背景线而不是 4 条,但它是初始设置的,以便背景的 4 个四分之一移到 4 个角。
谢谢
我编辑了你的代码,并删除了垂直动画:
.bannerbuttonV1 {
--cblack: #282828; /* the color*/
--_p: 0%;
box-shadow: 0 0 0 .1em inset var(--cblack);
--_g: linear-gradient(var(--cblack) 0 0) no-repeat;
background:
var(--_g) calc(var(--_p,0%) - 100%) 0%,
var(--_g) calc(200% - var(--_p,0%)) 0%,
var(--_g) calc(var(--_p,0%) - 100%) 100%,
var(--_g) calc(200% - var(--_p,0%)) 100%;
background-size: 50.5% calc(var(--_p,0%)/2 + .5%);
outline-offset: .1em;
transition: background-size .4s,
}
.bannerbuttonV1:hover {
--_p: 100%;
color:#fff;
transition: background-position .4s, background-size 0s;
}
<div class='bannerbutton bannerbuttonV1'>
shop now
</div>
您需要删除“background-position 0s .4s, color .4s;”这一行, 现在应该可以正常工作了。