Гайфутдинов Ильнур \ Блог

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

Комментарии