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为其宽度和高度设置动画。

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

1 个答案:

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