如何在不影响表格的情况下为表格单元格中的图像创建动画边框？

Question

我正在尝试将图像包装在带有动画边框的表格单元格中。我现在已经完成了边框，但是当我尝试应用边框时，它会应用于整个表格而不是特定图像。

我的html：

<table>
    <tr class='TopRow'>
        <td rowspan='2' style='width: 15%; text-align: center; vertical-align: middle;'>
            <div class='ProfileContainer'>
                <img src='../Avatar 1.jpg' class='ProfilePic'>
                <span class='top'></span>
                <span class='right'></span>
                <span class='bottom'></span>
                <span class='left'></span>
            </div>
        </td>
        <td rowspan='1'>
            <p style='padding-top: 5px; padding-left: 10px;'> May 22, 2019 </p>
        </td>
    </tr>
    <tr class='BottomRow'>
        <td rowspan='1' style='padding-top: 10px; padding-left: 10px;'>
        <p>aaa</p>
        </td>
    </tr>
</table>

我的CSS：

table {
    border: 1px solid white;
    position: relative;
    left: 80px;
    width: 80%;
    border-collapse: collapse;
}

.ProfilePic {
    width: 80px;
    height: 80px;
    border: #fff;
    background: transparent;
    overflow: hidden;
    border-top: 4px solid rgba(255, 49, 49, 0.5);
    border-right: 4px solid rgba(0, 255, 255, 0.5);
    border-bottom: 4px solid rgba(57, 255 , 20, 0.5);
    border-left: 4px solid rgba(255, 255, 113, 0.5);
}

span {
    position: absolute;
    border-radius: 5vmax;
}

.top {
    top: 0;
    left: 0;
    width: 0;
    height: 5px;
    background: linear-gradient(90deg, transparent 50%, rgba(255, 49, 49, 0.5), rgb(255, 49, 49));
}

.bottom {
    right: 0;
    bottom: 0;
    height: 5px;
    background: linear-gradient(90deg, rgb(57, 255, 20), rgba(57, 255, 20, 0.5), transparent 50%);
}

.right {
    top: 0;
    right: 0;
    width: 5px;
    height: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(0, 255, 255, 0.5), rgb(0, 255, 255));
}

.left {
    bottom: 0;
    left: 0;
    width: 5px;
    height: 0;
    background: linear-gradient(180deg, rgb(255, 255, 113), rgba(255, 255, 113, 0.5), transparent 70%);
}

.top {
    animation: animateTop 3s ease-in-out infinite;
}

.bottom {
    animation: animateBottom 3s ease-in-out infinite;
}

.right {
    animation: animateRight 3s ease-in-out infinite;
}

.left {
    animation: animateLeft 3s ease-in-out infinite;
}

@keyframes animateTop {
    25% {
        width: 100%;
        opacity: 1;
    }
    
    30%,
    100% {
        opacity: 0;
    }
}

@keyframes animateBottom {
    0%,
    50% {
        opacity: 0;
        width: 0;
    }

    75% {
        opacity: 1;
        width: 100%;
    }

  76%,
  100% {
    opacity: 0;
  }
}

@keyframes animateRight {
  0%,
  25% {
    opacity: 0;
    height: 0;
  }

  50% {
    opacity: 1;
    height: 100%;
  }

  55%,
  100% {
    height: 100%;
    opacity: 0;
  }
}

@keyframes animateLeft {
  0%,
  75% {
    opacity: 0;
    bottom: 0;
    height: 0;
  }

  100% {
    opacity: 1;
    height: 100%;
  }
}
    

我相信这是因为我的 span 属性，我尝试使用 div 甚至将其包装到另一个表中，但它仍然不起作用。

Answer 1

如果您想对图像应用动画边框，那么您必须在 css 代码中添加以下 .class。

.ProfileContainer {
  position: relative;
  display: table;
  margin: auto;
}