javascript - 如何用Javascript制作表格边框动画？

Question

我想创建一个 Javascript 函数，它将显示 html 中表格的边框，如视频 here. 中所示。
(由于我们无法在这里发布视频，所以我将视频上传到 YouTube 上。请观看。只有 5 秒。)
我的意思是当正文/页面加载时，表格边框将以这种方式显示。 我不知道该怎么做。有人可以帮我编码这个动画吗？

Answer 1

有趣的问题。我会尝试使用 :after 伪元素和 CSS 动画来伪造边框。看看这个演示。

table:after {
    content: '';
    z-index: -1;
    position: absolute;
    top: -3px;
    left: -3px;
    bottom: 100%;
    right: 100%;
    background: green;
    -webkit-animation-name: border;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: lenear;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes border {
    from {
        top: -3px;
        top: -3px;
    }
    to {
        bottom: -4px;
        right: -4px;
    }
}

演示:http://jsfiddle.net/dfsq/uSmL3/

作为 CSS 动画的替代方案，您可以使用一些元素(即 div)，将其正确放置在表格下方，并使用 javascript 为其宽度和高度设置动画。