Красивая анимация 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;
}
}