html - 如何创建带旋转的 CSS3 溢出隐藏隐藏聚光灯效果？

Question

我想创建一种效果，即我有一个静态图像，并且该图像正在被旋转 mask 遮盖。我知道没有办法在 HTML5/CSS 中进行原生屏蔽(适用于所有浏览器)，所以我使用 mask:overflow 方法。

我看到了 Google 发布的这个链接: https://storage.googleapis.com/html5-demos/MaskRotateTranslate/index.html

我正在尝试实现第二个示例中的图片。唯一的区别是我不需要内部图像来制作动画，只需要它的“ mask ”。

这个示例似乎是通过 Google Web Designer 生成的，所以我不能真正使用它的代码。

我尝试使用计数器动画方法重新创建它(div 内的一个 div。外部 div 充当“ mask ”。当外部 div 向右移动 30px 时，另一个移动 -30px，从而产生错觉静态内容)。在我开始旋转 div 之前，这种方法对我一直有效。旋转似乎会影响内容的 x 和 y 值，这会扰乱反作用力。

长话短说.. 如何使用简单的 Javascript 或 CSS 动画实现类似的效果？有没有人成功制作过这种类型的动画？

Answer 1

这是我的尝试:

.image {
  width: 400px;
  height: 300px;
  background-image: url(http://placekitten.com/800/600);
  background-size: contain;
  position: absolute;
  left: 0px;
  right: 0px;
  animation: inner 4s infinite;
}

.container {
  width: 400px;
  height: 300px;
  left: 400px;
  position: relative;
  animation: outer 4s infinite;
  border: solid red 1px;
  overflow: hidden;
}

@keyframes inner {
  from {transform:  rotate(0deg) translate(500px);} 
  to {transform:  rotate(360deg) translate(0px); } 
}

@keyframes outer {
  from {transform: translate(-500px) rotate(0deg);} 
  to {transform: translate(0px) rotate(-360deg);} 
}

<div class="container">
  <div class="image"></div>
  </div>