将鼠标悬停在按钮 #2 上时如何使过渡更平滑答案

【问题标题】：How would I make the transition smoother when hovering over button #2将鼠标悬停在按钮 #2 上时如何使过渡更平滑
【发布时间】：2021-03-24 09:32:07
【问题描述】：

将鼠标悬停在按钮 #2 上时，如何使黑色边框的过渡更平滑？

目前，将鼠标悬停在按钮 #2 上时会稍有延迟。有没有更好的方法？

我想让圆形按钮的边框快速填充。目前，它有点滞后，我觉得这会分散注意力。

谢谢！

.btn {
  width: 130px;
  height: 50px;
  border: none;
  margin: 4rem;
}

.btn2 {
    position: relative;
    overflow: hidden;
    transition:  height .5s;
}


.btn2::after {
  content:"";
  display: block;
  background-color: black;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  top:50px;
  left:50px;
  opacity: .2;
  transition: top 1.2s ease-out;
}

.btn2::before {
  content:"";
  display: block;
  background-color: black;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  position: absolute;
  top:-50px;
  left:15px;
  opacity: .2;
  transition: top 1.2s ease-out;
}


.btn2:hover::before{
  position: absolute;
  top:34px
}

.btn2:hover::after{
  position: absolute;
  top:70px
}

.btn2:hover {
  height: 130px;
  border-radius: 50%;
  animation:circle 4s ease;
}

@keyframes circle {
  0%{ border:none}
  10%{border-top:2px solid}
  25%{border-right:2px solid}
  45%{border-bottom:2px solid}
  65%{border-left:2px solid}
  85%{border:2px solid}
  100%{border:2px solid}
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>A Great Demo on CodePen</title>
</head>
<body>
  <div class="wrap">
    
   <button class="btn btn2">button 2 !!</button>
  </div>
  
</body>
</html>

【问题讨论】：

请澄清您的具体问题或添加其他详细信息以准确突出您的需要。正如目前所写的那样，很难准确地说出你在问什么。
寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。
你好！我建议您阅读文章How do I ask a good question?。它将帮助您获得最佳答案！
我是对的，你想要的效果是让边框平滑地出现，一次一点点从顶部开始并循环（而不是在任何地方从 0 到 2px 均匀增长）一次）？
嗨，海沃氏，我希望它看起来像有人在画一个圆圈。像border-top >border-right >border-bottom >border-bottom平滑出现，从代码中可以看到border-top >stop a little bit >border-right >stop a little bit >border-bottom >stop a一点点>边框底部。谢谢。

标签： css animation css-transitions smoothing keyframe

【解决方案1】：

出现问题是因为边框的长度不是动画的。因此，当您在动画中将顶部边框更改为实心/颜色/宽度时，所有顶部边框都会立即显示。因此，在给定的动画中，在绘制边框时，每个动画点都会出现抖动。再加上它们不是笔直的边框，这会给每个边框的末端带来一种锥形外观。

变换旋转是可动画的并且应该是平滑的，因此在按钮顶部放置另一个圆圈并旋转它以在绘制边框时一点一点地显示边框应该可以工作。但是，我遇到了一些问题，因为在半径为 50% 的高清屏幕上，像素（屏幕像素）的匹配并不精确（就 CSS 像素而言）——即使表面上被顶部的圆圈。

因此，这不是问题的完美答案，但可能会提供一些关于如何获得所需效果的想法。

它将另一个“按钮”放在 btn2 之上，并将它们都放在一个容器中。 btn2 被动画化以依次显示 4 个边框（就像问题中给出的代码一样），顶部的新按钮在旋转时“显示”这些边框。这个额外的按钮可能是与容器关联的伪元素，如果 wrap 没有用于其他可能成为容器而无需更改 HTML 的东西。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Draw circle</title>
<style>
* {
  margin: 0;
  padding: 0;  
}

    .btn2container {
      position: relative;
    }
    .btn {
      width: 130px;
      height: 50px;
      border: none;
      margin: 4rem;
      --bg: #eeeeee;
    }

    .btn2 {
        position: relative;
        overflow: hidden;
        transition:  height .5s;
        border-width: 3px;
        background-color: var(--bg);
    }


    .btn2container:hover .btn2 {
      border-style: none;
      border-color: transparent;
      height: 130px;
      border-radius: 50%;
      animation:circle 4s linear;
      animation-fill-mode: forwards;
      border-width: 3px;
    }
    .btn2container .revealer {
      position: absolute;
      animation-name: none;
      animation-duration: 4s;
      animation-fill-mode: forwards;
      animation-iteration-count: 1;
      animation-timing-function: linear;
      z-index:999;
      transform: rotate(0deg);
      width: 130px;
      height: 130px;
      border-radius: 50%;
      border-style: solid;
      display: none;
      overflow: hidden;
      background-color:transparent;
      border-style: solid;
      border-width:3px;
      border-color: red transparent transparent transparent;
    }
    .btn2container:hover .revealer {
      animation-name: reveal;
      display: block;
    }
  @keyframes reveal {
    0% {
      display: block;
      opacity: 1;
      height: 130px;
      width:130px;
      transform: rotate(0deg);
      border-width:3px;
      border-color: var(--bg) transparent transparent transparent;
      box-shadow: 0 0 0 2pt white;
    }
    74.9999% {
      transform: rotate(270deg);
      border-width:3px;
      border-color: var(--bg) transparent transparent transparent;
      box-shadow: 0 0 0 2pt white;
    }
    75% {
      border-width: 2px;
      border-color: transparent transparent transparent black;
    }
    99.9% {
      transform: rotate(360deg);
      border-color: transparent transparent transparent black;
      opacity: 1;
      border-width: 2px;
    }
    100% {
      opacity:0;
      border-width: 3px;
    }
  }
    @keyframes circle {
      0% {
        border-style: solid;
        border-color: black transparent transparent transparent;
        border-width: 2px;
      }
      24.99% {
        border-color: black transparent transparent transparent;
        border-width: 3px;
      }
      25% {
        border-color: black  black transparent transparent;
        border-width: 3px;
      }
      49.99% {
        border-color: black  black transparent transparent;
        border-width: 3px;
      }
      50% {
        border-color: black black black transparent;
        border-width: 3px;
      }
      99.99% {
        border-color: black black black transparent;
        border-width: 3px;
      }
      100% {
        border-color: black;
        border-style: solid;
        border-width: 3px;
      }
      }

    .btn2::after {
      content:"";
      display: block;
      background-color: black;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      position: absolute;
      top:50px;
      left:50px;
      opacity: .2;
      transition: top 1.2s ease-out;
    }

    .btn2::before {
      content:"";
      display: block;
      background-color: black;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      position: absolute;
      top:-50px;
      left:15px;
      opacity: .2;
      transition: top 1.2s ease-out;
    }


    .btn2container:hover .btn2::before{
      position: absolute;
      top:34px
    }

    .btn2container:hover .btn2::after{
      position: absolute;
      top:70px
    }

    </style>
    </head>
<body>
    <div class="wrap">       
    <div class="btn2container">
     <button class="btn revealer"></button>
     <button class="btn btn2">button 2 !!</button>
   </div>
   </div>     
 </body>
</html>

【讨论】：