CSS中围绕div滚动方块的动画答案

【问题标题】：Animation of rolling square around div in CSSCSS中围绕div滚动方块的动画
【发布时间】：2016-06-21 16:23:11
【问题描述】：

我正在尝试弄清楚，如何在 css+js 中制作像这张图片一样在 div 内滚动的正方形动画。我想知道这是否可能，因为在拐角处会翻转到另一边。

【问题讨论】：

看看这个：css-tricks.com/transforms-on-svg-elements
这个问题要么过于宽泛，要么基于观点，要么需要讨论，因此与 Stack Overflow 无关。如果您有具体的、可回答的编程问题，请提供完整的详细信息。
希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些额外的研究，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的方法以及为什么它不起作用。
你希望它是响应式的还是特定的宽度和高度？
我希望它能够响应。对于上面的那些，我真的在谷歌上搜索了大约 2 个小时，一无所获。滚动方块的动画对我来说并不难，但响应式 div 边缘的移动是我的主要问题。

标签： javascript html css animation

【解决方案1】：

谷歌搜索并不是试图创建解决方案。谷歌搜索是试图找到其他人努力工作的解决方案。

看起来您只是希望有人为您完成工作。

我给你一个基本的概念例子。我想我知道你在寻找什么，但你显然不想为那个目标而努力，所以我也不想。在你证明自己的努力之前，这就是你从我这里得到的全部。

http://codepen.io/anon/pen/BzQzXe

#square {
  position: relative;
  height: 5vmin;
  width: 5vmin;
  border: 1px solid blue;
  margin: 0;
  padding: 3vmin;
  overflow: hidden;
  animation-duration: 12s;
  animation-name: movesquare;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes movesquare {
  0% {
    margin: 0;
  }
  25% {
    margin: 85% 0 0 0;
  }
  50% {
    margin: 85% 0 0 85%;
  }
  75% {
    margin: 0 0 0 85%;
  }
  87.5%{
    }
  100% {
    margin: 0;
    transform:rotateZ(1800deg);
  }
}

【讨论】：