CSS3旗帜/波浪运动并带有文本

Question

CSS3旗帜/波浪运动并带有文本

4

我正在做一个项目，需要我纯粹使用HTML5和CSS3制作一个动画旗帜——看起来像这样（链接），并且有这种运动（链接）。我知道有一些使用HTML画布的解决方案，但我的客户特别要求使用CSS3完成（尽可能少用JavaScript）。对于波浪效果，我找到的唯一解决方案是创建几个div元素，并在每个元素上设置translateY的动画延迟，以共同创建旗帜效果（JSFiddle here），并对文本执行相同的操作。

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

- Ana Ameer

1

这可以使用CSS3关键帧动画和切换背景半径来完成。 - Coastal-Cam

@X-RaySpecs 你是不是想说border-radius？但那只会影响到旗帜，文本呢？ - Ana Ameer

1

使用SVG是一个选项吗？还是必须使用HTML+CSS？ - Just a student

SVG是一种选择，但我昨天发现实际SVG文件中的动画也是可能的。当我把它弄好后，我会更新这个问题的，谢谢。 - Ana Ameer

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ravichandra · Answer 1

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

希望这能对你有所帮助