Html CSS3内有文字的标志/波浪运动

所以我正在做一个项目，要求我制作一个动画标志，完全用HTML5和CSS3来表现，然后

我知道存在一些使用HTML画布的解决方案，但我的客户机特别要求使用CSS3（并且尽可能少使用javascript）来完成。对于挥舞效果，我找到的唯一解决方案是创建几个

div

元素，并在

translateY

上分别设置动画延迟，以便一起创建旗帜效果（），并对文本执行完全相同的操作

---

我也可以通过使文本具有绝对位置使文本与旗帜重叠，但我的问题是我不确定如何将文本的波浪运动与旗帜的波浪运动协调起来，使其完全相同。或者，如果有另一种方法来制作这个动画（还不确定如何处理边上的三角形）？我知道；在这种情况下，什么更有效？

我们可以使用关键帧在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; }
}

HTML
CSS
身体{
背景：#24aecd；
}
.怪物{
宽度：190px；
高度：240px；
利润率：2%自动；
背景：url（'https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png")左中,；
动画：播放。8s步（10）无限；
}
@关键帧播放{
100%{背景位置：-1900px；}
}

---

我希望这将帮助您

这可以通过使用CSS3关键帧动画和切换背景来完成radius@X-你是说边界半径吗？这不会影响国旗吗？文本呢？使用SVG是一个选项吗？或者它真的必须是HTML+CSS吗？SVG是一个选项，但我昨天发现，在实际的SVG文件中动画是可能的。当我启动并运行它时，我会更新这个问题，谢谢。尝试将答案的重要部分放在Stackoverflow上，而不是放在URL后面的另一个站点上。