Question

我希望用CSS蒙版创建效果，其中蒙版图像移动得非常慢，而蒙版形状保持静止。现在我用相反的动画制作它，但是你可以看到它看起来非常紧张......任何想法或建议都非常感谢！我也不反对非CSS专用解决方案。

HTML：

<div class="masked-section">
  <img src="https://images.unsplash.com/photo-1486903658356-4006b8abd767?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=178c7b6760bd80795174675611b673c1&auto=format&fit=crop&w=1055&q=80" class="mask"/>
</div>

CSS：

.masked-section {
  height: 800px;
  background-image: url(https://images.unsplash.com/photo-1420768255295-e871cbf6eb81?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=fecaea6c506b84475edf1e4164944c38&auto=format&fit=crop&w=1050&q=80);
  background-size: cover;
  overflow:hidden;
}
.mask {
  mask-image: url(https://www.webascender.com/Portals/0/Blog/SVG-101/apple.svg);
  -webkit-mask-image: url(https://www.webascender.com/Portals/0/Blog/SVG-101/apple.svg);
  display: block;
  width: 120vw;
  height: auto;
  margin: 0 auto;
  mask-mode: alpha;
  -webkit-mask-mode: alpha;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: 15%;
  -webkit-mask-size: 15%;
  mask-position: 31vw 150px, center;
  -webkit-mask-position: 31vw 150px, center;
  animation: test 100s infinite linear;
}
@keyframes test {
  25% { transform: translate(-31vw, -150px); mask-position: 62vw 300px, center; -webkit-mask-position: 62vw 300px, center }
  50% { transform: translate(0, 0); mask-position: 31vw 150px, center; -webkit-mask-position: 31vw 150px, center;}
  75% { transform: translate(-31vw, -150px); mask-position: 62vw 300px, center; -webkit-mask-position: 62vw 300px, center; }
}

Codepen：

https://codepen.io/anon/pen/KoPzOM

Answer 1

在包含图片的div上使用clip-path。将过渡应用于div内的图像。

要使用clip-path你需要为此制作一个svg：

<svg height="0" width="0">
  <defs>
    <clipPath id="svgPath">
      <path d="PATH DATA HERE"/>
    </clipPath>
  </defs>
</svg>

并将其放在文档中。

然后通过将clip-path: url(#svgPath)应用于div来链接剪辑蒙版。

https://codepen.io/anon/pen/VXZKRb

CSS面具动画看起来非常紧张

1 个答案: