Rossoll Webdesign | Code Library

Border Animation 1

Border Animation

HTML

<div class="AnimatedBorder">
  <p>Border Animation</p>
</div>

CSS

* {
  box-sizing: border-box;
}

.AnimatedBorder {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 275px;
  height: 275px;
  background: #222;
  border-radius: 30px;
  overflow: hidden;
}
.AnimatedBorder::before {
  position: absolute;
  content: '';
  width: 150%;
  height: 150%;
  /* Color Gradient */
  background: conic-gradient(#cbf802 30deg, #ff6200 50deg, transparent 100deg);
  animation: animate 4s linear infinite;
}
@keyframes animate {
  0%{
    transform: rotate(360deg);
  }
  100%{
    transform: rotate(0deg);
  }
}
.AnimatedBorder::after {
  position: absolute;
  display: flex;
  content: '';
  width: 265px;
  height: 265px;
  background: #201f1f;
  border-radius: 30px;
}

.AnimatedBorder p {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 3;
  font-family: verdana;
  font-size: 25px;
  color: #fff;
}