html - CSS3 旗帜/波浪运动，里面有文字

Question

所以我正在做一个元素，要求我制作一个纯粹使用 HTML5 和 CSS3 的动画旗帜——看起来像 like this 和 with this kind of movement。

我知道存在一些使用 HTML Canvas 的解决方案，但我的客户特别要求使用 CSS3(以及尽可能少的 javascript)来完成。对于挥手效果，我找到的唯一解决方案是创建多个 div 元素，并在 translateY 上为每个元素添加动画延迟，以共同创建旗帜效果(JSFiddle here)并为文本做完全相同的事情。

我还可以通过使文本具有绝对位置来使文本与旗帜重叠，但我的问题是我不确定如何协调文本的波浪运动与旗帜的波浪运动以使其完全相同.或者，如果有另一种方法来制作这个动画(还不确定我将如何处理边缘的三 Angular 形)？我知道 an image can be used to animate over it ；在这种情况下，什么会更有效率？

Answer 1

我们可以使用关键帧在 CSS3 中制作动画。

您必须拥有透明图像，该图像将具有一组帧(单个图像中的所有帧)并使用关键帧进行动画处理。

这是一个这样的例子 - https://codepen.io/Guilh/pen/yldGp

HTML
<div class="monster"></div>


CSS
body {
  background: #24aecd;
}

.monster {
  width: 190px;
  height: 240px;
  margin: 2% auto;
  background: url('https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png') left center;
  animation: play .8s steps(10) infinite;
}

@keyframes play {
    100% { background-position: -1900px; }
}

希望对你有帮助