How to achieve wave effect in css

How to achieve the wave effect in css: first create an HTML sample file; then create a square div; then add the "border-radius: 50%" attribute to achieve a circular effect; finally use the animation attribute to make the circle Just roll it up to create a wave effect.

# The operating environment of this article: windows7 system, HTML5&&CSS3 version, Dell G3 computer.

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

Because realizing the wave curve requires the help of Bezier curve.

As for using pure CSS to implement Bezier curves, well, there is currently no good method.
Of course, with the help of other forces (SVG, CANVAS), the so-called wave effect can be easily achieved.

Let’s first take a look at the wave effect achieved by non-CSS methods

SVG to achieve the wave effect

With the help of SVG, it is easy to draw a cubic Bezier curve.

<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 a cubic Bezier curve lies in this section

. Those who are interested can do their own research.

canvas to achieve wave effect

The principle of using canvas to achieve wave effect 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;

    // 初始状态
    // ctx.bezierCurveTo(90, 28, 92, 179, 200, 100);
    // 末尾状态
    // 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);
        // 绘制三次贝塞尔曲线
        ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, 200, 100);
        // 绘制圆弧
        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);
    });
})
web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路

Mainly uses dynamic drawing ctx.bezierCurveTo() cubic Bezier curve to achieve the motion effect of waves. Those who are interested can study it by themselves. [Recommended learning:

css video tutorial]

CSS to achieve wave effect

Didn’t you say that CSS can’t be achieved at the beginning? Yes, we cannot directly draw a cubic Bezier curve, but we can use some clever methods 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 you add border-radius: 50% to a square, you will get a circle.

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

Okay, if the border-radius is less than 50%, but close to 50%, we will get a graph like this (pay attention to the corners, the whole graph gives people It feels a bit round, but not very round.)

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

Okay, what's the use of this whole shape? Can you still create waves?

Let’s let the above graphic scroll (rotate) and see the 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 intention of rotating when they see this. , if you stare carefully to one side, you will see an undulating effect similar to a wave.

Our purpose is to simulate and create a wave-like effect with the help of this dynamically transformed undulating animation.

Implementation

Of course, what we see here is a panoramic implementation diagram, so it doesn’t feel obvious. OK, let us use examples to see what kind of effect can be achieved through specific implementation.

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

The floating wave effect behind actually uses the border above -radius: 40% ellipse, just magnified many times, graphics outside the field of view are hidden, leaving only one side of the field of view, and some corresponding transforms are added.

Some students may still have questions, OK, then we will hide and display the above effect, and complete the animation outside the field of view. Then the principle of generating waves is actually as follows:

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

It is worth noting that when we generate waves here, we do not use the rotating ellipse itself, but use it to cut the background and produce the effect of waves.

The above is the detailed content of How to achieve wave effect in css. For more information, please follow other related articles on the PHP Chinese website!