动态边框悬停效果

Question

我成功制作了一个非常漂亮的动态边框效果
所以如果你运行我的代码你就会看到我做了什么

这里是代码和运行页面：https://jsfiddle.net/pv7hsgmq/

body {
  background-color: rgb(58, 58, 58);
}

.selects {
  float: right;
  margin-right: 10vh;
  padding: 0;
  margin-top: 10vh;
}

.selects li {
  display: inline-block;
  cursor: pointer;
  font-size: 19px;
}

.animatedCard {
  place-items: center;
  display: inline-grid;
  position: relative;
  height: 50px;
  width: 230px;
  background: #00000000;
  overflow: hidden;
}

.animatedCard::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 50%;
  background: white;
  transform: rotate(45deg);
}

.animatedCard:hover::before {
  animation: animate 2s linear infinite;
}

@keyframes animate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animatedCard::after {
  position: absolute;
  content: "";
  inset: 2px;
  background: rgb(0, 0, 0);
  border-radius: 8px;
}

.selects li:hover {
  transform: scale(1.2);
  transition: 100ms;
  border-bottom-width: 10px solid white;
}

<ul class="selects">
  <div class="animatedCard">
    <li>¿Que es Front-end?</li>
  </div>
</ul>

我的问题是，如何实现这种边框效果，但背景透明

Answer 1

这是使用掩模和渐变的不同想法

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg; 
}
.animatedCard {
  position: relative;
  display: inline-block;
  font-size: 25px;
  color: #fff;
  padding: 10px 20px;
}
.animatedCard::before {
  position: absolute;
  content: "";
  inset: 0;
  padding: 2px; /* control the border thickness */
  border-radius: 10px;
  background: linear-gradient(var(--angle),#0000 35%,white 0 65%,#0000 0);
  --m:conic-gradient(#000 0 0);
  mask: var(--m) exclude,var(--m) content-box;
  animation: animate 2s linear infinite paused;
}
.animatedCard:hover::before {
  animation-play-state: running;
}

@keyframes animate {
  to {
    --angle:1turn;
  }
}


body {
  background-color: rgb(58, 58, 58);
}

<div class="animatedCard">
  some content inside
</div>