CSS Tricks to Create Wave Effects

It has always been very difficult to achieve wave effects using pure CSS.

Because the Bezier curve is needed to realize the wave curve.

As for using pure CSS to implement Bezier curves, well, there is no good way at the moment.

Of course, with the help of other forces (SVG, CANVAS), the so-called wave effect can be easily achieved.

Let's first look at the wave effect achieved by non-CSS methods.

SVG wave effect

With SVG, it is easy to draw cubic Bezier curves.

<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <text class="liquidFillGaugeText" text-anchor="middle" font-size="42px" transform="translate(100,120)" style="fill: #000">50.0%</text>
    <!-- Wave -->
    <g id="wave">
    <path id="wave-2" fill="rgba(154, 205, 50, .8)" d="M 0 100 C 133.633 85.12 51.54 116.327 200 100 A 95 95 0 0 1 0 100 Z">
    <animate dur="5s" repeatCount="indefinite" attributeName="d" attributeType="XML" values="M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z;
    M0 100 C145 100, 41 100, 200 100 A95 95 0 0 1 0 100 Z;
    M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z"></animate>
    </path>
    </g>
    <circle cx="100" cy="100" r="80" stroke-width="10" stroke="white" fill="transparent"></circle>
    <circle cx="100" cy="100" r="90" stroke-width="20" stroke="yellowgreen" fill="none" class="percentage-pie-svg"></circle>
</svg>

The core of drawing the cubic Bezier curve lies in this segment: <path id="wave-2" fill="rgba(154, 205, 50, .8)" d="M 0 100 C 133.633 85.12 51.54 116.327 200 100 A 95 95 0 0 1 0 100 Z">. If you are interested, you can do some research on your own.

Canvas achieves wave effect

The principle of using canvas to achieve wave effects is the same as SVG, which is to use paths to draw cubic Bezier curves and give them animation effects.

$(function() {
    let canvas = $("canvas");
    let ctx = canvas[0].getContext('2d');
    let radians = (Math.PI / 180) * 180;
    let startTime = Date.now();
    let time = 2000;
    let clockwise = 1;
    let cp1x, cp1y, cp2x, cp2y;

    // Initial state // ctx.bezierCurveTo(90, 28, 92, 179, 200, 100);
    // End state // ctx.bezierCurveTo(145, 100, 41, 100, 200, 100);

    requestAnimationFrame(function waveDraw() { 
        let t = Math.min(1.0, (Date.now() - startTime) / time);

        if(clockwise) {
            cp1x = 90 + (55 * t);
            cp1y = 28 + (72 * t);
            cp2x = 92 - (51 * t);
            cp2y = 179 - (79 * t);
        } else {
            cp1x = 145 - (55 * t);
            cp1y = 100 - (72 * t);
            cp2x = 41 + (51 * t);
            cp2y = 100 + (79 * t);
        }

        ctx.clearRect(0, 0, 200, 200); 
        ctx.beginPath();
        ctx.moveTo(0, 100);
        // Draw a cubic Bezier curve ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, 200, 100);
        // Draw an arc ctx.arc(100, 100, 100, 0, radians, 0);
        ctx.fillStyle = "rgba(154, 205, 50, .8)";
        ctx.fill();
        ctx.save(); 

        if( t == 1 ) {
            startTime = Date.now();
            clockwise = !clockwise;
        }

        requestAnimationFrame(waveDraw);
    });
})

It mainly uses the dynamic drawing of ctx.bezierCurveTo() cubic Bezier curve to achieve the wave movement effect. Those who are interested can study it by themselves.

CSS to achieve wave effect

Didn’t you say at the beginning that CSS couldn’t achieve this? Yes, we have no way to draw a cubic Bezier curve directly, but we can use some tricks to simulate the effect of wave motion. Let's take a look at this method.

principle

The principle is very simple. We all know that if we add border-radius: 50% to a square, we will get a circle.

width: 240px;
height: 240px;
background: #f13f84;
border-radius: 50%;

OK, if border-radius is not 50%, but close to 50%, we will get a shape like this (note the corners, the whole shape feels a bit round, but not quite round.)

width: 240px;
height: 240px;
background: #f13f84;
border-radius: 40%;

Okay, so what’s the point of having such a graphic? Can you create waves?

Let's rotate the above graphic to see the effect:

CSS to achieve wave effect

@keyframes rotate{
    from{transform: rotate(0deg)}
    to{transform:rotate(359deg)}
}
.ripple{
    width: 240px;
    height: 240px;
    background: #f13f84;
    border-radius: 40%;
    animation: rotate 3s linear infinite;
}

Many people may not understand the purpose of the rotation when they see this, but if you look closely, you will see an undulating effect similar to that of a wave.

Our goal is to use this dynamically changing undulating animation to simulate a wave-like effect.

accomplish

Of course, what we see here is a panoramic implementation diagram, so it is not very obvious. OK, let's use examples one by one to see what kind of effect can be achieved by specific implementation.

We can use the above principle to create a wave motion background effect:

The floating wave effect at the back actually makes use of the ellipse with border-radius: 40% above, but it is magnified many times. The graphics outside the field of view are hidden, leaving only a side of the field of view, and some corresponding transform changes are added.

Some students may still have doubts. OK, let's hide the above effect and display it, and complete the animation outside the field of view. Then the principle of generating waves is as follows:

The red box in the picture is our actual field of view.

It is worth noting that here we generate waves not by using the rotating ellipse itself, but by using it to cut the background to produce the wave effect.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.