圆形按钮边框动画

huangapple
go评论88阅读模式
英文:

Rounded button border animation

问题

我有一个按钮，我正在尝试在悬停时为其添加边框动画效果。我有一个可用的代码，但问题是当你悬停在按钮上时，左上角和右下角的半径开始为0，只有在动画完成时才会调整（你可能需要放大来看我在说什么）。这不是什么大问题，但会让按钮看起来不够精致。

有没有办法确保这些边框在开始时就是圆角的？

以下是按钮的代码：

  1. <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 -->

  1. .container {
  2.   width: 100%;
  3.   height: 200px;
  4.   background: wheat;
  5.   display: flex;
  6.   justify-content: center;
  7.   align-items: center;
  8. }
  10. .btn {
  11.     position: relative;
  12.     display: block;
  13.     width: 180px;
  14.     z-index: 3;
  15.     cursor: pointer;
  16.     border-radius: 4px;
  17.     text-decoration: none;
  18.     border: 1px solid black;
  19.     text-align: center;
  20.     padding: 8px 0;
  21.     color: black;
  22. }
  24. .btn:before, .btn:after {
  25.     display: block;
  26.     content: &#39; &#39;;
  27.     border-top: none;
  28.     border-right: none;
  29.     border-bottom: none;
  30.     border-left: none;
  31.     position: absolute;
  32.     width: 0;
  33.     height: 0;
  34.     opacity: 0;
  35.     transition: opacity 200ms ease-in-out;
  36.     border-radius: 4px;
  37. }
  39. .btn:before {
  40.     top: -1px;
  41.     left: -1px;
  42. }
  44. .btn:after {
  45.     bottom: -1px;
  46.     right: -1px;
  47. }
  49. .btn:hover:before {
  50.     width: 180px;
  51.     height: calc(100%);
  52.     opacity: 1;
  53.     border-top: 2px solid white;
  54.     border-right: 2px solid white;
  55.     transition: width 300ms cubic-bezier(.07, .62, .61, 1), height 150ms 300ms cubic-bezier(.07, .62, .61, 1);
  56. }
  58. .btn:hover:after {
  59.     width: 180px;
  60.     height: calc(100%);
  61.     opacity: 1;
  62.     border-bottom: 2px solid white;
  63.     border-left: 2px solid white;
  64.     transition: width 300ms cubic-bezier(.07, .62, .61, 1), height 150ms 300ms cubic-bezier(.07, .62, .61, 1);
  65. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;container&quot;&gt;&lt;a href=&quot;&quot; class=&#39;btn&#39;&gt;Hover me&lt;/a&gt;&lt;/div&gt;

<!-- end snippet -->

答案1

得分: 0

  1. 您需要更改`:before`和`:after`元素的起始高度，因为它们在动画开始时没有任何高度。

.btn:before, .btn:after {
height: 2px;
}

  2. <details>
  3. <summary>英文:</summary>
  5. You need to change starting height for `:before` and `:after` elements, because they don&#39;t have any height at the beginning of the animation.

.btn:before, .btn:after {
height: 2px;
}

  2. </details>
  6. # 答案2
  7. **得分**: -1
  9. 在最后找到了解决方案，其实非常简单，只需要将`overflow:hidden`添加到`.btn`类中。
  11. <details>
  12. <summary>英文:</summary>
  14. Found the solution, in the end it was pretty simple, just needed to add `overflow:hidden` to the `.btn` class.
  16. </details>

huangapple
  • 本文由 发表于 2023年3月3日 20:18:57
  • 转载请务必保留本文链接：https://go.coder-hub.com/75626988.html
  • border
  • border-radius
  • css
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定