htmlcsscss-animationsborder

Dynamic border hover effect

I managed to make a very nice dynamic border effect
So if you run my code you'll see what I did
how it looks

here the code and the running page: 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>

my question is, how can I achieve this border effect, but with the transparent background

Solution

  • Here is a different idea using mask and gradients

    @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>