Pure CSS for wave movement effect

This article mainly introduced the pure CSS to realize the wave movement effect example, the small compilation thought quite good, now shares to everybody, also gives everybody to make a reference. Follow the small series together to see it, hope to help everyone.

On some pages, the effect of waves is often seen, although only the role of decoration, but it makes the page more vivid, and in some cases can also play a role in the progress bar, and the form of waves than the ordinary progress bar more beautiful and interesting.

If you want to achieve the effect of a wave, the first method that the author thinks of is to draw waves through canvas and then animate the waves with frame animations. This way the wave effect should be the best, can achieve a lot of details, such as control the height of the crest, change the number of waves, according to the height of the previous wave to calculate the height of a wave, and so on.

But often the demand is not so complicated, the product manager and design want is just a look more beautiful wave effect. If you use canvas to do it, it is really overqualified, time consuming. So in this case, you can try to use CSS to accomplish this small need.

Analyzing wave effects

The above is one of the wave effects that the author completes (Do not do gif, just use multiple images to collage together instead of it), it has two peaks, the two peaks, when they move up, there will be a right to push the effect. Let's look at the first one, what should we do if we want to achieve a crest?

The crest has radians, in the CSS can achieve the Radian effect is border-raduis this property, but for the effect of the right push, a single point of view, in fact, can be understood as a rotational animation, we can be achieved by animation.

Html<p class= "Wave" ></p>//style.wave {    width:300px;    height:300px;    border-raduis:50%;    Background:blue;}

The. Wave in the above code appears as a circle on the page. Although no animations have been added, we can already imagine that, even when rotated, we do not visually appear to be moving. How is this going to work out? In fact, it is very simple, so long as each corner of the radian is different on the line. At the same time, make the width and height different, can make the effect of drawing out better.

. wave {    width:250px;    height:300px;    border-top-right-radius:150px;    border-top-left-radius:150px;    border-bottom-right-radius:150px;    border-bottom-left-radius:140px;    Background: #adcbfe;}

The irregular shape is then animated by animation.

. wave {    width:250px;    height:300px;    border-top-right-radius:150px;    border-top-left-radius:150px;    border-bottom-right-radius:150px;    border-bottom-left-radius:140px;    Background: #adcbfe;    Animation:wave 4s linear Infinite;} @keyframes Wave {    0% {transform:rotate (0deg);}    100% {transform:rotate (360deg);}}

For the use of CSS animations, you can refer to the previous article:

A purely CSS implementation of the carousel chart effect

Here, the implementation of a wave is complete. The second wave implementation steps and the first is the same, but you can modify the width height Border-raduis animation These properties, so that the two waves of the movement rhythm, there are fast and slow, high and low, so that the effect of the wave will be more real.