Question

The bounty expires in 2 days. Answers to this question are eligible for a +50 reputation bounty. lukas23 wants to draw more attention to this question.

我有这种纽托尼边界的估算,在纽托尼没有四舍五入时,这种估算是正确的。如果纽特州有9px的边境半径,我如何能够发挥同样的作用。如果我没有在正确的边界上打断,我就无法得到正确工作的愿望。

body {
  font-family: sans-serif;
  background-color: black;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  position: relative;
  width: 200px;
  height: 40px;
  background-color: #083a65;
  border: none;
  color: white;
  font-size: 18px;
  border-radius: 10px;
}

.button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: 10px;
  border-top: 1px solid yellow;
  border-right: 1px solid yellow;
  animation: border-top-right-animation 2s infinite;
}

.button::after {
  content: "";
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 0;
  height: 0;
  border-radius: 10px;
  border-left: 1px solid yellow;
  border-bottom: 1px solid yellow;
  animation: border-bottom-left-animation 2s infinite;
}

@keyframes border-top-right-animation {
  0% {
    width: 0px;
    height: 0px;
  }
  25% {
    width: 100%;
    height: 0px;
  }
  50% {
    width: 100%;
    height: 100%;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}

@keyframes border-bottom-left-animation {
  0% {
    width: 0px;
    height: 0px;
    opacity: 0;
  }
  50% {
    width: 0px;
    height: 0px;
    opacity: 0;
  }
  50.1% {
    width: 0px;
    height: 0px;
    opacity: 1;
  }
  75% {
    width: 100%;
    height: 0px;
    opacity: 1;
  }
  100% {
    width: 100%;
    height: 100%;
    opacity: 1;
  }
}

<button class="button">My button</button>

Answer 1

Usually, stroke-dasharray and stroke-dashoffset properties of svg shapes are used for such animations. Something like this:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body {
  font-family: sans-serif;
  background-color: black;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.button {
  position: relative;
  width: 200px;
  height: 40px;
  background-color: #083a65;
  border: 0;
  color: white;
  font-size: 18px;
  border-radius: 10px;
  cursor: pointer;
  max-width: 100%;
}

button svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

button rect {
  animation: button-border 2s linear both;
}

@keyframes button-border {
  to {
    stroke-dashoffset: 0;
  }
}

<button
  type="button"
  class="button"
>
  My button
  <svg
    viewBox="0 0 200 40"
    fill="none"
    preserveAspectRatio="none"
  >
    <rect
      vector-effect="non-scaling-stroke"
      x="0.5"
      y="0.5"
      width="199"
      height="39"
      rx="9.5"
      stroke="yellow"
      stroke-dasharray="460"
      stroke-dashoffset="460"
    />
  </svg>
</button>

Answer 2

So I have finally managed to solve it. I hope this can help somebody. I made 4 different spans for all 4 lines, animated their width/height and made content of button different element absolutely positioned.

该守则是:

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.9);
}

.button {
  position: relative;
  width: 500px;
  height: 100px;
  background-color: #083a65;
  border: none;
  color: white;
  font-size: 18px;
  border-radius: 10px;
  overflow: hidden;
}

.button .text {
  position: absolute;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  top: 2px;
  left: 2px;
  background-color: #083a65;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
}

.button .top {
  position: absolute;
  left: 5px;
  top: 0px;
  width: 100%;
  height: 2px;
  background-color: yellow;
  animation: animate-top 1500ms linear;
}

.button .top::after {
  content: "";
  position: absolute;
  top: 0;
  right: 5px;
  width: 10px;
  height: 10px;
  background-color: yellow;
}

.button .right {
  position: absolute;
  right: 0;
  top: -5px;
  width: 2px;
  height: 100%;
  background-color: yellow;
  animation: animate-right 1500ms linear;
}

.button .right::before {
  content: "";
  position: absolute;
  bottom: -5px;
  right: 0;
  width: 10px;
  height: 10px;
  background-color: yellow;
}

.button .bottom {
  position: absolute;
  right: 0;
  bottom: 0px;
  width: 100%;
  height: 2px;
  background-color: yellow;
  animation: animate-bottom 1500ms linear;
}

.button .bottom::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background-color: yellow;
}

.button .left {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2px;
  height: 100%;
  background-color: yellow;
  animation: animate-left 1500ms linear;
}

.button .left::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background-color: yellow;
}

@keyframes animate-top {
  0% {
    width: 0px;
  }
  25% {
    width: 100%;
  }
  50% {
    width: 100%;
  }
  75% {
    width: 100%;
  }
  100% {
    width: 100%;
  }
}

@keyframes animate-right {
  0% {
    height: 0;
  }
  25% {
    height: 0;
  }
  50% {
    height: 100%;
  }
  75% {
    height: 100%;
  }
  100% {
    height: 100%;
  }
}

@keyframes animate-bottom {
  0% {
    width: 0;
  }
  25% {
    width: 0;
  }
  50% {
    width: 0;
  }
  75% {
    width: 100%;
  }
  100% {
    width: 100%;
  }
}

@keyframes animate-left {
  0% {
    height: 0;
  }
  25% {
    height: 0;
  }
  50% {
    height: 0;
  }
  75% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}

 <button class="button">
   <span class="top"></span>
   <span class="right"></span>
   <span class="bottom"></span>
   <span class="left"></span>
   <span class="text">Animated button</span>
 </button>

Answer 3

您可使用<条码> 慢性-梯度和外箱。

<!DOCTYPE html>
<html>
  <head>
    <title>Call to Action Border Animation</title>
    <style>
      body {
        font-family: sans-serif;
        background-color: black;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      
      .outer-box {
        --border-angle: 0deg;
        max-width: max-content;
        background: conic-gradient(
          from 280deg,
          yellow var(--border-angle),
          transparent var(--border-angle)
        );
        border-radius: 10px;
        -webkit-animation: bg-spin 3s linear infinite;
        animation: bg-spin 3s linear infinite;
      }

      .outer-box:hover {
        -webkit-animation-play-state: paused;
        animation-play-state: paused;
      }
      
      @-webkit-keyframes bg-spin {
        to {
          --border-angle: 360deg;
        }
      }
      @keyframes bg-spin {
        to {
          --border-angle: 360deg;
        }
      }

      .button {
        margin: 0;        
        width: 200px;
        height: 40px;
        background-color: #083a65;
        border: none;
        color: white;
        font-size: 18px;
        border-radius: inherit;
      }
      
      .inner-box {
        border-radius: calc(10px - 2px);
        border: 2px solid transparent;
      }

      @property --border-angle {
        syntax: "<angle>";
        inherits: true;
        initial-value: 0deg;
      }
      
    </style>
  </head>
  <body>
    <div class="outer-box">
      <div class="inner-box">
        <button class="button">My Button</button>
      </div>
    </div>  
  </body>
</html>

友情链接