Question

我在以下情况下挣扎：我有一个元素，它有一个剪辑路径来掩盖它的内容。这稍后用于动画，揭示内容。然而，其中的另一个元素有一个自己的动画，由于动画而没有被屏蔽。

基本上如此：-webkit-clip-path:inset(-10% 50% 98% 50%);和animation:animation 1s linear 0s infinite;似乎并不能很好地协同工作。如果禁用按钮元素上的动画，则可以看到它将被容器屏蔽。

有没有人知道是否有一种方法可以让按钮元素保持动画效果，还能让它被屏蔽吗？

谢谢！

Answer 1

添加

overflow: hidden;

在下面的示例中，我进行了一些额外的更改，以使示例更加清晰，但您不需要它们。只需使用clip-path为元素添加溢出。

.foo {
  outline: 1px dotted red;
}

.bar {
  padding:30px;
  background: silver;
  -webkit-clip-path: inset(1em 1em 1em 2em);
  clip-path: inset(1em 1em 1em 2em);
  overflow: hidden;
}

.button {
  display:inline-block;
  background:red;
  animation: animation 1s linear 0s infinite;
}

@keyframes animation {
    0% { transform: translateY(50px); }
   50% { transform: translateY(0);    }
  100% { transform: translateY(50px); }
}

<div class="foo">
  <div class="bar">
    <div class="button">
      Test
    </div>
  </div>
</div>

CSS动画破坏剪辑路径

1 个答案: