CSS, анимированная тень
css
.shadow-wrapper {
position: relative;
z-index: 0;
width: 300px;
height: 200px;
/*центруем все по центру*/
display: flex;
justify-content: center;
align-items: center;
}
.shadow {
position: relative;
width: 80%;
height: 80%;
background: linear-gradient(#000, #262626);
}
.shadow:before,
.shadow:after {
content: '';
position: absolute;
top: -2px;
bottom: -2px;
right: -2px;
left: -2px;
background: linear-gradient(
45deg,
#fb0094, #0000ff, #00ff00, #ffff00, #ff0000,
#fb0094, #0000ff, #00ff00, #ffff00, #ff0000
);
background-size: 500%;
z-index: -1;
animation: 30s animate infinite;
}
.shadow:after {
filter: blur(10px);
}
@keyframes animate {
0% {
background-position: 0 0;
}
50% {
background-position: 300% 0;
}
100% {
background-position: 0 0;
}
}
html
<div class="shadow-wrapper">
<div class="shadow"></div>
</div>
Источник: Online Tutorials
Комментарии