Question

我在互联网上捕获了this snippet of css代码，这些代码在悬停时围绕按钮的边框执行动画。我发现它非常好。

有没有办法自定义它以使边框动画无限循环而不是悬停？

这是代码：

      button {
            background: none;
            border: 0;
            box-sizing: border-box;
            box-shadow: inset 0 0 0 2px #f45e61;
            color: #f45e61;
            font-size: inherit;
            font-weight: 700;
            margin: 1em;
            padding: 1em 2em;
            text-align: center;
            text-transform: capitalize;
            position: relative;
            vertical-align: middle;
        }
        button::before, button::after {
            box-sizing: border-box;
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .draw {
            -webkit-transition: color 0.25s;
            transition: color 0.25s;
        }
        .draw::before, .draw::after {
            border: 2px solid transparent;
            width: 0;
            height: 0;
        }
        .draw::before {
            top: 0;
            left: 0;
        }
        .draw::after {
            bottom: 0;
            right: 0;
        }
       /* .draw:hover {
            color: #60daaa;
        }*/
        .draw:hover::before, .draw:hover::after {
            width: 100%;
            height: 100%;
        }
        .draw:hover::before {
            border-top-color: #60daaa;
            border-right-color: #60daaa;
            -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
            transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
        }
        .draw:hover::after {
            border-bottom-color: #60daaa;
            border-left-color: #60daaa;
            -webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
            transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
        }

<h1>CSS Border Transitions</h1>
<button class="draw">draw</button>

谢谢

Answer 1

您可以使用几乎相同的样式，但使用CSS动画而不是过渡。

button {
  background: none;
  border: 0;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 2px #f45e61;
  color: #f45e61;
  font-size: inherit;
  font-weight: 700;
  margin: 1em;
  padding: 1em 2em;
  text-align: center;
  text-transform: capitalize;
  vertical-align: middle;
}
.draw {
  overflow: hidden;
  position: relative;
}
.draw::before, .draw::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  border: 2px solid transparent;
  width: 0;
  height: 0;
}
.draw::before {
  top: 0;
  left: 0;
  border-top-color: #60daaa;
  border-right-color: #60daaa;
  animation: border 2s infinite;
}
.draw::after {
  bottom: 0;
  right: 0;
  animation: border 2s 1s infinite, borderColor 2s 1s infinite;
}

@keyframes border {
  0% {
    width: 0;
    height: 0;
  }
  25% {
    width: 100%;
    height: 0;
  }
  50% {
    width: 100%;
    height: 100%;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}
@keyframes borderColor {
  0% {
    border-bottom-color: #60daaa;
    border-left-color: #60daaa;
  }
  50% {
    border-bottom-color: #60daaa;
    border-left-color: #60daaa;
  }
  51% {
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
  100% {
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
}

<h1>CSS Border Transitions</h1>
<button class="draw">draw</button>

CSS Border过渡无限动画循环

1 个答案: