小编Tim*_*m R的帖子

圆形按钮边框长度动画

我有这个按钮边框动画,当按钮不圆角时可以正常工作。如果按钮的边框半径为 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: …
Run Code Online (Sandbox Code Playgroud)

css

5
推荐指数
2
解决办法
355
查看次数

标签 统计

css ×1