Question

我有一个想法，并希望了解对最佳实施有意义的观点。前提是基本上缓慢移动的物体在外壳周围弹跳。想想游戏＆＃39;小行星＆＃39;但没有宇宙飞船（与墙壁碰撞而不是通过）。

因为这是在后台并且纯粹是审美的，所以我认为它必须非常轻巧。我会使用所有CSS，但我的问题是可以将多个动画应用于对象吗？假设我使用

在方框中弹跳方形

＆＃13;

---------
.square {
        animation: moveX 2.05s linear 0s infinite alternate, moveY 2.4s linear 0s infinite

       @keyframes moveX {
         from { left: 0; } to { left: 480px; }
       }

       @keyframes moveY {
         from { top: 0; } to { top: 280px; }
       }
}

＆＃13;

我怎样才能让它连续旋转？或者至少创造一些这样的效果？如果我需要将一些内容与javascript放在一起那么这很好，只是好奇我是否忽略了CSS的内容。

Answer 1

您可以在CSS中为元素添加旋转：

.square {
  position: relative; /* Ensure it's movable with non static position */
  animation:
    moveX 2.05s linear 0s infinite alternate,
    moveY 2.4s linear 0s infinite,
    rotate 2s linear infinite;
}
@keyframes moveX {
  from { left: 0; } to { left: 480px; }
}
@keyframes moveY {
  from { top: 0; } to { top: 280px; }
}
@keyframes rotate {
  0% {transform: rotate(0deg);} 100% {transform: rotate(359deg);}
}

使用-359deg逆时针旋转。

寻找（可能是CSS）涉及移动物体的设计解决方案

1 个答案: