Question

我正在为网站的一部分制作动画，我希望能够剪辑或捕获背景图像的一部分并随动画一起移动。我发现的唯一类似内容是来自https://squarespace.com。我想学习的好方法是模仿他们的动画，但是我不知道如何剪辑背景。还是我需要在顶部放置图像并将其剪切？任何帮助都会很棒！

我尝试过background-clip:，但似乎无法获得正确的结果。

这是我取得的一些进展的Codepen。

点击here

新思想！

如果我使用类似html2canvas的东西来捕获背景图像的一部分该怎么办。这可能吗？有人熟悉吗？

Answer 1

只需将 clip-path 应用于任何元素。然后，您可以通过CSS或JavaScript修改剪切路径（在我的示例中为简单的多边形）。为了简单起见，这里有一个CSS示例：

body {
margin: 0;
}

main {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-flow: row wrap;
  background: #eee;
  height: 100vh;
}

.octagon {
-webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.textbox {
width: 300px;
height: 300px;
word-break: break-all;
overflow: hidden;
background: #FFF;
}

.background  {
width: 300px;
height: 300px;
background: #000 url(http://lorempixel.com/300/300/sports/7) no-repeat center center scroll;
background-size: cover;
color: #FFF;
}

.animated {
  animation: animation_polygon 6000ms alternate infinite ease;
}


@keyframes animation_polygon {

  25% {
    -webkit-clip-path: polygon(45% 33%, 70% 0%, 73% 41%, 100% 70%, 62% 79%, 30% 100%, 36% 60%, 0% 30%);
    clip-path: polygon(45% 33%, 70% 0%, 73% 41%, 100% 70%, 62% 79%, 30% 100%, 36% 60%, 0% 30%);
  }

  50% {
    -webkit-clip-path: polygon(19% 6%, 57% 28%, 93% 17%, 70% 49%, 81% 93%, 45% 54%, 3% 69%, 35% 39%);
    clip-path: polygon(19% 6%, 57% 28%, 93% 17%, 70% 49%, 81% 93%, 45% 54%, 3% 69%, 35% 39%);
  }
  
  75% {
    -webkit-clip-path: polygon(35% 36%, 60% 2%, 60% 35%, 95% 67%, 64% 65%, 13% 93%, 30% 59%, 4% 38%);
    clip-path: polygon(35% 36%, 60% 2%, 60% 35%, 95% 67%, 64% 65%, 13% 93%, 30% 59%, 4% 38%);
  }

}

<main>

<img class="octagon animated" src="http://lorempixel.com/300/300/sports/2">

<div class="octagon animated background">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>

<div class="octagon textbox">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>

<img class="octagon animated" src="http://lorempixel.com/300/300/sports/5">

</main>

如何剪辑背景图像并随动画一起移动？

1 个答案: