.btn-text {
background: transparent;
box-sizing: border-box;
text-decoration: none;
box-shadow: inset 0 0 0 1px transparent;
border-bottom: 1px solid transparent;
color: red;
padding: 8px 12px 0;
font-size: inherit;
font-weight: 500;
position: relative;
width:100px;
display:block;
vertical-align: middle;
animation: before 0.4s ease;
transition: all 0.4s ease;
margin-top: 30px;
}
.btn-text::before, .btn-text::after {
box-sizing: inherit;
content: "";
position: absolute;
width: 100%;
height: 100%;
}
.btn-text:active {
transform: translateY(0);
box-shadow: 0 1rem 0.5rem rgba(0, 0, 0, 0.2);
}
.btn-text:hover {
text-decoration: none;
color: red;
border-bottom: 1px solid transparent;
}
.btn-text::before, .btn-text::after {
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: center;
}
.btn-text::before {
border-top: 1px solid red;
border-bottom: 1px solid red;
transform: scale3d(0, 1, 1);
}
.btn-text::after {
border-left: 1px solid red;
border-right: 1px solid red;
transform: scale3d(1, 0, 1);
}
.btn-text:hover::before, .btn-text:hover::after {
animation: border 0.5s ease forwards;
}
.btn-text span {
display: block;
border-bottom: 1px solid red;
margin-top: 8px;
}
@keyframes border {
to{
transform: scale3d(1,1,1);
}
}
<a href="#!" class="btn-text " style="width: fit-content">know
more
<span></span>
</a>
我正在尝试在动画效果中添加一个很酷的悬停。当我将鼠标悬停在按钮上时,我正在调用一个扩大边框的动画。
我的问题是,当我将鼠标悬停在按钮之外时,它会回到没有动画的初始状态。
我希望将鼠标悬停在同一动画上。