CSS3旗帜/波浪运动，里面有文字 [英] CSS3 Flag/wave movement with text inside

问题描述

所以我正在开发一个项目，要求我用纯HTML5和CSS3制作一个动画标志 - 喜欢这个，这种运动 。

So I'm working on a project that requires me to make an animated flag purely with HTML5 and CSS3—looking something like this, and with this kind of movement.

我知道有一些HTML canvas的解决方案，但我的客户特别要求用CSS3完成（尽可能少的javascript）。对于挥动效果，我找到的唯一解决方案是创建几个 div 元素，并在 translateY 一起创建旗帜效果（ JSFiddle here ）并做同样的事情对于文本。

I know there exist some solutions with HTML canvas, but my client specifically requested this be done with CSS3 (and as little javascript as possible). For the waving effect, the only solution I found was to create several div elements and have each with an animation delay on the translateY to create the flag effect all together (JSFiddle here) and do the exact same thing for the text.

我也可以通过使文本具有绝对位置使文本重叠标记，但我的问题是我不知道如何协调波动的运动带有标志的文本，所以它可以完全相同。或者，或者，如果有另一种方法来做这个动画（不确定我将如何围绕边缘的三角形工作）？我知道图像可以用来为它制作动画;在这种情况下更有效的是什么？

I can also make the text overlap the flag by making the text have an absolute position, but my problem is I'm not sure how I can coordinate the wave movement of the text with the flag's so it can be exactly the same. Or, alternatively, if there's another way to do this animation (not sure yet how I'm going to work around the triangles at the edges)? I know an image can be used to animate over it; what would be more efficient in this case?

推荐答案

我们可以使用关键帧在CSS3中完成动画。

We can do the animation in CSS3 using Keyframes.

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

You have to have the transparent image which will have the set of frames(all frames in single image) and animate using keyframes.

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

Here is one Example like that - 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; }
}

我希望这能帮到你

这篇关于CSS3旗帜/波浪运动，里面有文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！