我尝试使用纯CSS来复制这个效果:
到目前为止,我已经尝试了以下方法:
.parent {
height: 90vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.hoverable-element {
border: 0.1rem solid #000;
background: #fff;
padding: 1rem 2rem;
transform: translate(0, 0);
box-shadow: 0 0 0 #000;
transition:
box-shadow 200ms ease-out,
transform 200ms ease-out;
}
.hoverable-element:hover {
transform: translate(-0.5rem, -0.5rem);
box-shadow:
0.1rem 0.1rem 0 #000,
0.2rem 0.2rem 0 #000,
0.3rem 0.3rem 0 #000,
0.4rem 0.4rem 0 #000,
0.5rem 0.5rem 0 #000;
}
<div class="parent">
<button class="hoverable-element">Hoverable Button</button>
</div>
但是这种方法重复了很多不必要的代码,而且没有正确地做我想做的事情。 我希望按钮“阴影”或悬停效果可以用白色背景框起来(如图所示)。除此之外,我对该从哪里开始毫无头绪。