Question

我正在制作一款带有战略视觉叠加的国际象棋游戏。其中一个需要一些片段和正方形的光动画，特别是缓慢而稳定的脉冲。我的董事会是一个单独的正方形。通过将CSS中的背景图像设置为它所包含的片段的.svg来显示片段。

这可以在CSS中完成吗？我使用最新的浏览器，不支持遗产，所以我可以使用所有漂亮的CSS3东西。我想到的另一个选择是将电路板的背景图像设置为动画片段的动画.gif。这会有用吗？

有没有其他方法可以做到这一点我没有提到过？我想避免使用包/框架，但我使用的是jQuery。

澄清：

我想让棋子慢慢地将这种脉冲（闪光？）放在适当位置以便强调。我希望它是一个缓慢，微妙和一致的脉冲，持续到另一个事件将其关闭。

Answer 1

听起来你正在寻找CSS动画。

看看这里：http://www.w3.org/TR/css3-animations

特别需要以下时序功能：

animation-name，指定要使用的关键帧集。
animation-duration，指定动画的速度。
animation-iteration-count，重复动画。
animation-direction，以交替动画的方向。

您需要创建一些关键帧，以便您指定动画修改哪些CSS属性。

此外，您需要所有内容的供应商前缀，因此您需要编写-webkit-animation-name而不是animation-name（例如），并重复-moz和其他供应商的所有内容。< / p>

这是一个创建脉动不透明效果的webkit示例。您可以试用from和to部分中的属性来设置大小，颜色等动画。

.chess-piece {
    -webkit-animation-duration: 1s;
    -webkit-animation-name: pulse;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
}
@-webkit-keyframes pulse {
    from {
        opacity: 0.5;
    }
    to {
        opacity: 1;
    }
}

JSFiddle example for webkit and moz

Answer 2

这很容易做到。据我所知，你想制作一些活跃的国际象棋人物的发光动画？以下是我将如何实现解决方案：创建2个png，一个是国际象棋图形处于不闪烁的普通状态，另一个是完全照明状态。然后使用jQuery将发光状态的不透明度从0更改为100并再次返回到0。您可以发送jQuery“on animation finish”信号来实现此目的。一旦事件发生，您可以使用某种简化的observer pattern取消效果。

如何使用JavaScript / CSS为DOM元素设置动画

2 个答案: