Question

这是我昨天问过的问题的后续问题。

我的目标是创建一个框并通过框滑动SVG图形，这样当图形移动时，您只能看到框中的图形部分，并且框外的部分将被隐藏。这是使这项工作的代码：

HTML：

<!DOCTYPE html>
<html>
  <head>
  </head>
<body>
  <br><br><br>
  <div id="mydiv">
    <br><br><br>
    <a id="swipe1";><img src="https://www.benngrant.com/html5/shape1.svg" /></a>
    <br><br><br><br>
  </div>
</body>

CSS：

body {background: #ffffff url("https://www.benngrant.com/wp-content/themes/Abstract_Dark1/images/Bottom_texture.jpg") no-repeat center center fixed; background-size:cover;}
a#swipe1 {transition-timing-function:linear; position:relative; opacity:.62; top:10px; animation: mymove 7.85s forwards;}
@keyframes mymove{from {left:-100%;} to {left:150%;}}
#mydiv {text-align:center; background:black; opacity:.5; max-width:50%; position:relative; margin-left:auto; margin-right:auto; display:block; overflow: hidden; border:1px solid black}

基本上，我所要做的就是添加溢出：隐藏和位置：相对于#mydiv，使其工作，这是指出的。（我知道为什么溢出：隐藏是必要的，仍然困惑为什么位置：亲戚，但哦，好吧。）

这次我要问的是：是否有另一种方法可以使用clip-path css属性来定义一个隐藏不在矩形内的移动图形的任何部分的矩形来实现相同的效果？实际上可以使用clip-path以某种方式定义允许浏览器在其中绘制图像的部分部分的位置，因为图像在关键帧之后移动？从理论上讲，这对我来说似乎是合理的，但我不确定如何开始以这种方式实现它。

有什么想法？仅使用HTML和CSS，而不是JavaScript？这会产生与此相同的结果吗？

https://jsfiddle.net/91p21odc/

Answer 1

也许是这样的：

<div id="mydiv">
  <div class="clip">
    <div id="swipe1">

      <img src="https://www.benngrant.com/html5/shape1.svg" />
    </div>
  </div>
</div>

{{1}}

如何使用clip-path剪辑div之外的动画？

1 个答案: