Gradient Border Animation. CSS-эффект анимированного и светящегося border — HTML, CSS

Красивая анимация border у блока, сделанная при помощи HTML, CSS.

HTML

<div class="shadow"></div>

CSS

body {
  margin: 0;
  padding: 0;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.shadow {
  position: relative;
  max-width: 400px;
  width: 100%;
  height: 250px;
  background: linear-gradient(0deg, #000, #262626);
}

.shadow::before,
.shadow::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000);
  background-size: 400%;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  z-index: -1;
  animation: animate 30s linear infinite;
}

.shadow::after {
  filter: blur(20px);
}

@keyframes animate {

  0%,
  100% {
    background-position: 0 0;
  }

  50% {
    background-position: 300% 0;
  }
}

Источник
Оцените статью
( Пока оценок нет )
Поделишься в соц. сетях? 🙂 Спасибо 🙏
Devtutor
Добавить комментарий