Применение анимированной тени к Bootstrap 4 карточкам - PullRequest
Новая
       4

Применение анимированной тени к Bootstrap 4 карточкам

0 голосов
/ 13 апреля 2020

Я пытался понять, как я могу применить анимированную тень к Bootstrap 4 карте. В настоящее время у меня есть несколько карт, которые выглядят так:

Пи c из Bootstrap Карта

Цель состоит в том, чтобы нанести анимированную тень вокруг коробки, как в это видео. Я тоже прикрепил пи c, но видео показывает анимацию:

(https://www.youtube.com/watch?v=1EAtn4B-76g)

Пи c коробки с Граница

Фактический код для анимированной рамки в примере с YouTube: 

body {
    margin: 0;
    padding: 0;
    background: #000;
}

.shadow {
    position: relative;
    margin: 200px auto 0;
    width: 400px;
    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 20s linear infinite;
}

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

@keyframes animate {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 300% 0;
    }
    100% {
        background-position: 0 0;
    }
}

Я новичок в Bootstrap и CSS. Я перепробовал все, чтобы добавить это на карту, но я не могу решить это вообще. Я могу применить градиент типа радуги над картой, но как только я изменяю z-index на -1, он, кажется, полностью исчезает.

Фотография градиента до применения Z-Index

Буду очень признателен за любые советы / рекомендации о том, как я могу применить анимированное свечение вокруг Bootstrap 4 Открытки! (

1 Ответ

0 голосов
/ 13 апреля 2020

Вот способ, которым вы можете это сделать.

margin-top: 5rem; и margin-left: 5rem; только для styling purpose, поэтому вы знаете, что граница применяется во всех позициях. 

.shadow {
    /* JUST FOR STYLING */
    margin-left: 5rem;
    margin-top: 5rem;
    /* JUST FOR STYLING */
    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 20s linear infinite;
}

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

@keyframes animate {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 300% 0;
    }
    100% {
        background-position: 0 0;
    }
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="card shadow" style="width: 18rem;">
    <img src="https://picsum.photos/1920/1080" class="card-img-top" alt="...">
    <div class="card-body bg-light">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
...