Question

我制作了一个tic tac toe board并试图产生某种发光效果。但是当我使用关键帧进行动画处理时，我删除的那一面也会被显示，而且动画也是不均匀的。

td{
    width:115px;
    height:115px;
    border: 4px solid rgba(0, 191, 255,0.3); 
    animation: borderGlow 1s ease-in-out infinite alternate;
}
table{
    border-collapse: collapse;
    position: absolute;
    top:25%;
}
table tr:first-child td{
    border-top:none;
}
table tr:last-child td{
    border-bottom:none;
}
table tr td:first-child{
    border-left:none;
}
table tr td:last-child{
    border-right:none;
}

@keyframes borderGlow{
    from{
        border: 4px solid rgba(0, 191, 255,0.3);  
    }
    to{
        border: 4px solid rgba(0, 191, 255,1);
    }
}

<table>
            <tr>
                <td class="cell" id="0">O</td>
                <td class="cell" id="1">X</td>
                <td class="cell-2" id="2">O</td>
            </tr>
            <tr>
                <td class="cell-2" id="3">O</td>
                <td class="cell-2" id="4">O</td>
                <td class="cell" id="5">X</td>
            </tr>
            <tr>
                <td class="cell" id="6">X</td>
                <td class="cell" id="7">O</td>
                <td class="cell" id="8">X</td>
            </tr>
        </table>

Answer 1

无需指定动画的所有边框属性（因为您正在覆盖none值），只需颜色即可：

@keyframes borderGlow {
    from {
        border-color: rgba(0, 191, 255, 0.3);  
    }
    to {
        border-color: rgba(0, 191, 255, 1);
    }
}

此外，动画看起来非常“统一”在我身边。也许，您可以使用缓动来实现更线性的效果。

CSS无法为电路板设置动画？

1 个答案: