1

我正在开发一个带有一些战略视觉覆盖的国际象棋游戏。其中一个需要一些轻微的棋子和方块动画，特别是缓慢而稳定的脉动。我的板是一个，每个都是一个正方形。通过将 CSS 中的 background-image 设置为它所包含的片段的 .svg 来显示片段。

这可以在 CSS 中完成吗？我正在使用不支持旧版的最新浏览器，所以我可以使用所有漂亮的 CSS3 东西。我在想的另一个选择是将棋盘的背景图像设置为一块跳动的动画 .gif。这行得通吗？

还有其他我没有提到的方法吗？我想避免使用包/框架，但我使用的是 jQuery。

澄清：

我想让棋子有一种脉冲（闪光？）慢慢到位以强调。我希望它是一个缓慢、微妙和一致的脉冲，一直持续到另一个事件将其关闭。

4

2 回答 2

2

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

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

特别是您需要以下计时功能：

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

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

此外，您需要在所有内容上添加供应商前缀，因此您需要编写-webkit-animation-name而不是animation-name（例如），并为-moz其他供应商重复所有内容。

这是一个创建脉动不透明度效果的 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;
    }
}

Webkit 和 moz 的 JSFiddle 示例

于 2013-05-03T22:05:01.127 回答
0

这是很可能的，也很容易做到。据我了解，您想制作某种活跃国际象棋人物的发光动画吗？以下是我实施解决方案的方法：创建 2 个 png，一个具有不闪光的普通状态的国际象棋图形，另一个具有完全照亮的状态。然后使用 jQuery 将照明状态的不透明度从 0 更改为 100 并再次变回 0。您可以发送 jQuery“动画完成”信号来实现此目的。一旦事件发生，您不仅可以使用某种简化的观察者模式来取消效果。

于 2013-05-03T21:25:56.217 回答