英文:
Rounded button border animation
问题
我有一个按钮，我正在尝试在悬停时为其添加边框动画效果。我有一个可用的代码，但问题是当你悬停在按钮上时，左上角和右下角的半径开始为0，只有在动画完成时才会调整（你可能需要放大来看我在说什么）。这不是什么大问题，但会让按钮看起来不够精致。
有没有办法确保这些边框在开始时就是圆角的？
以下是按钮的代码：
<div class="container"><a href="" class='btn'>悬停我</a></div>
英文:
I have a button for which I'm trying to animate the borders on hover. I have a working code, but the issue is that when you hover it, the radius on top left and bottom right starts at 0 and gets adjusted only when the animation finishes (you might need to zoom in to see what I'm talking about). It's not a huge deal, but makes the button look unpolished.
Is there a way to make sure those borders are rounded at the beginning?
Here's the code for the button:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
width: 100%;
height: 200px;
background: wheat;
display: flex;
justify-content: center;
align-items: center;
}
.btn {
position: relative;
display: block;
width: 180px;
z-index: 3;
cursor: pointer;
border-radius: 4px;
text-decoration: none;
border: 1px solid black;
text-align: center;
padding: 8px 0;
color: black;
}
.btn:before, .btn:after {
display: block;
content: ' ';
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
position: absolute;
width: 0;
height: 0;
opacity: 0;
transition: opacity 200ms ease-in-out;
border-radius: 4px;
}
.btn:before {
top: -1px;
left: -1px;
}
.btn:after {
bottom: -1px;
right: -1px;
}
.btn:hover:before {
width: 180px;
height: calc(100%);
opacity: 1;
border-top: 2px solid white;
border-right: 2px solid white;
transition: width 300ms cubic-bezier(.07, .62, .61, 1), height 150ms 300ms cubic-bezier(.07, .62, .61, 1);
}
.btn:hover:after {
width: 180px;
height: calc(100%);
opacity: 1;
border-bottom: 2px solid white;
border-left: 2px solid white;
transition: width 300ms cubic-bezier(.07, .62, .61, 1), height 150ms 300ms cubic-bezier(.07, .62, .61, 1);
}
<!-- language: lang-html -->
<div class="container"><a href="" class='btn'>Hover me</a></div>
<!-- end snippet -->
答案1
得分: 0
您需要更改`:before`和`:after`元素的起始高度，因为它们在动画开始时没有任何高度。
.btn:before, .btn:after {
height: 2px;
}
<details>
<summary>英文:</summary>
You need to change starting height for `:before` and `:after` elements, because they don't have any height at the beginning of the animation.
.btn:before, .btn:after {
height: 2px;
}
</details>
# 答案2
**得分**: -1
在最后找到了解决方案，其实非常简单，只需要将`overflow:hidden`添加到`.btn`类中。
<details>
<summary>英文:</summary>
Found the solution, in the end it was pretty simple, just needed to add `overflow:hidden` to the `.btn` class.
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论