将动画阴影应用于 Bootstrap 4 卡片

Question

我一直在试图弄清楚如何将动画阴影应用到 Bootstrap 4 Card。目前，我有一些这样的卡片：

Pic of Bootstrap Card

目标是在此视频中的盒子周围应用动画阴影。我也附上了一张照片，但视频显示了动画：

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

Pic of Box with Border

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，它似乎就完全消失了。

Photo of the Gradient before applying Z-Index

对于如何在 Bootstrap 4 Cards 周围应用动画发光的任何建议/指导，我将不胜感激！ :(

Answer 1

这里有办法，你可以做到。

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>