0

我正在尝试制作一个像这样工作的网络效果：

（它其实和卡片没有关系，只是用卡片来比喻；它实际上是一个图像。并且没有卡片的“堆叠”，它只是浏览器窗口中的一个固定位置。）

有牌随意摆放，有“叠”位。

将鼠标悬停在一张卡片上，它会翻转（rotateX 360 度）并转换为“堆叠”位置。

当鼠标在任何地方移动时，它仍然存在。

如果鼠标悬停在另一张卡片上，堆叠中的卡片会翻转回原来的位置，而新卡片会翻转到堆叠位置。

等等...

我正在使用 Chrome 39 并希望尽可能使用 Web Animations API 来执行此操作，因为我相信它会产生最好的表示。如果没有，Chrome 39 可以轻松支持任何可能的解决方案：CSS、JQuery、JavaScript、Dart、QML 等。

这个垃圾小动画就是我所拥有的：

<html>
<head><title>Choose a card</title></head>
<body>
<div class="card" style="width:50px;">Foo</div>
<div class="card" style="width:50px;">Bar</div>
<div class="card" style="width:50px;">Baz</div>
<div class="card" style="width:50px;">Qux</div>
<script>
  var elem=document.querySelector('.card');
  var player=elem.animate([
      {transform:"rotateX(180deg) scale(2) translate(10px,10px)"},
      {transform:"rotateX(360deg) scale(3) translate(200px,200px)"}
    ],
    {
      direction: "forward", duration: 250, iterations: Infinity
    });
</script>
</body>
</html>

感谢任何帮助！

4

0 回答 0