Question

我有这个简单的CSS微调器，在这里：

html {
  background: black;
  
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

@keyframes k__common-spin-cw {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.wd-spinner {
  height: 30px;
  width: 30px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.15);
  border-width: 2px;
  border-radius: 100%;
  border-top-color: #00ba8c;
  -webkit-animation: k__common-spin-cw 700ms linear infinite;
  animation: k__common-spin-cw 700ms linear infinite;
}

<div class="wd-spinner"></div>

是否可以使用border-radius的渐变边框，而不是让突出显示的border-top的尾部突然结束，使其成为一个漂亮的渐变渐变，同时还保持背景透明？

Answer 1

我删除了动画并增加了大小以使效果更容易看清。

使用伪，我添加了一个与边框相同颜色的阴影来创建淡入淡出。

将鼠标悬停在div上并应用隐藏的溢出，设置最终效果

html {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.wd-spinner {
  height: 200px;
  width: 200px;
  border-radius: 100%;
  position: relative;
}
.wd-spinner:hover {
  overflow: hidden;
}
.wd-spinner:after {
  content: "";
  position: absolute;
  height: 196px;
  width: 196px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.15);
  border-width: 2px;
  border-radius: 100%;
  border-top-color: #00ba8c;
}
.wd-spinner:before {
  content: "";
  position: absolute;
  height: 196px;
  width: 196px;
  top: 2px;
  left: 2px;
  border-radius: 100%;
  box-shadow: -40px -40px 70px -22px #00ba8c;
}

<div class="wd-spinner"></div>

边框半径渐变与透明背景

1 个答案: