Question

我想创建一个效果，我有一个静态图像，并且该图像被旋转蒙版展开。我知道在HTML5 / CSS中没有办法进行原生掩码（适用于所有浏览器）所以我使用了mask：overflow方法。

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

我试图实现第二个例子中描绘的内容。唯一的区别是，我不需要内部图像来制作动画，只需要它的＆＃34;掩盖＆＃34;。

此示例似乎是通过Google Web Designer生成的，因此我无法真正使用它的代码。

我尝试使用计数器动画方法重新创建它（div中的div。外部div用作＆＃39;掩码＆＃39;。当外部div向右移动30px时，另一个移动-30px ，创造静态内容的幻觉）。这种方法对我有用，直到我开始旋转div。旋转似乎会影响内容的x和y值，这会影响对抗效果。

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

Answer 1

这是我的尝试：

＆＃13;

.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);} 
}

＆＃13;

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

＆＃13;

如何通过旋转创建一个CSS3溢出隐藏的取消屏蔽聚光灯效果？

1 个答案: