小编ale*_*603的帖子

希望一切都好.

我正在开发一款游戏,我想给一些盒子制作动画.

我希望一个盒子从小开始然后向外生长,所有边缘同时生长,其效果看起来像是从中心向外生长.

到目前为止,我所拥有的最佳动画如下:它可以根据需要增加框的高度和宽度,但是从左侧和顶部开始.我希望它从一个中心点开始.

我看了W3上的动画属性,似乎没有任何东西适合船.

  .box_2_gen{

    animation-duration: 0.25s;
    animation-name: createBox;

    position: relative;

    background: #FFEDAD;

    border: black solid;
    border-width: 1px;
    border-radius: 15px;

    width: 98px;
    height: 98px;

    margin: 10px;

    float: left;
}



@keyframes createBox{
    from{
        height:0px;
        width: 0px;

    }
    to{
        height: 98px;
        width: 98px;
    }
}

编辑:我的问题可能看起来像另一个类似的问题,但我只是想知道如何只使用关键帧.

谢谢,亚历克斯

所以我有一个HTML网格,每个框都使用以下约定进行标记.每个框都有一个标记为row_column的ID.我想创建一个方法来扫描文档并返回一个只包含具有特定列号的框的数组.例如,如果我调用下面的函数,它应该返回一个框数组,如果我用数字2调用它,将返回(1_2,2_2,3_2和4_2).

  function getBoxesByColumn(columnNumber){
        return document.getElementById("?_" + columnNumber);
    }

从那里,我将使用该函数以这种方式在另一个函数中创建一个数组:

function test(){
    var boxes = getBoxesByColumn(1);
    console.log(boxes);

但是,当我调用控制台时,它只打印一个空值.这是为什么？

编辑:

我的HTML示例(包含2行)

        <div id = "game_background">

        <!-- Row 1 --> 

        <div id = "row_1" class = "row">

            <div id = "1_1" class = "box_empty">
                <p class = "v"></p>
            </div>

            <div id = "1_2" class = "box_empty">
                <p class = "v"></p>
            </div>

            <div id = "1_3" class = "box_empty">
                <p class = "v"></p>
            </div>

            <div id = "1_4" class = "box_empty">
                <p class = …