如何使用旋转创建 CSS3 溢出隐藏的取消遮罩聚光灯效果？答案

【问题标题】：How can I create a CSS3 overflow hidden unmasking spotlight effect with rotation?如何使用旋转创建 CSS3 溢出隐藏的取消遮罩聚光灯效果？
【发布时间】：2016-10-12 21:09:43
【问题描述】：

我想创建一个效果，其中我有一个静态图像，并且该图像正在被旋转蒙版取消蒙版。我知道没有办法在 HTML5/CSS 中进行本机屏蔽（适用于所有浏览器），所以我使用 mask:overflow 方法。

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

我正在尝试实现第二个示例中所描绘的内容。唯一的区别是我不需要内部图像进行动画处理，它只是“蒙版”。

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

我尝试使用计数器动画方法重新创建它（一个 div 内的一个 div。外部 div 充当“掩码”。当外部 div 向右移动 30px 时，另一个移动 -30px，产生错觉静态内容）。这种方法对我有用，直到我开始旋转 div。旋转似乎会影响内容的 x 和 y 值，从而破坏了反击效果。

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

【问题讨论】：

文字变长，任务还不清楚（至少对我来说）。

标签： html css overflow masking

【解决方案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>

【讨论】：