Pure CSS achieves wave effects !, Css achieves Wave Effect

Pure CSS achieves wave effects !, Css achieves Wave Effect

It has always been very difficult to use pure CSS to implement the wave effect.

Because the beam curve is needed to realize the wave.

However, there is no good way to use pure CSS to implement the besell curve and amount.

Of course, with the help of other forces (SVG and CANVAS), the so-called wave effects can be easily completed. Let's take a look at the non-CSS wave effects.

 

Implement wave effects using SVG

With SVG, it is easy to draw three besell curves.

See the results:

The Code is as follows:

<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) ">
The core of drawing the Three-bysel curve is<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">This section. If you are interested, you can study it on your own.
 
Use canvas to implement wave effects
The same principle of using canvas to implement the wave effect as SVG is that it uses the path to draw a three-bysel curve and give the animation effect.
The code for using canvas is as follows:
$ (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 status // ctx. bezierCurveTo (90, 28, 92,179,200,100); // end status // 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 the ctx cubic besile curve. bezierCurveTo (cp1x, cp1y, cp2x, cp2y, 200,100); // draw the arc ctx. arc( 100,100,100, 0, ra Dians, 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 dynamic Renderingctx.bezierCurveTo()If you are interested, you can study the effect of waves on the cubic besell curve.
 
Implement wave effects with pure CSS
Okay. The next step is the focus of this article! Use pure CSS to achieve the effect of waves.
Are you kidding me? Didn't I say that CSS is powerless?
Yes, we have no way to draw a three-bysel curve directly, but we can use some clever methods to simulate the effect of wave movement. Let's look at the following method as a strange trick.
Principle
The principle is very simple. We all know that a square is added to it.border-radius: 50%, And a circle is obtained.
border-radius: Used to set the border rounded corner. A circle is determined when a radius is used.
Okay, ifborder-radiusIf it is less than 50%, but close to 50%, we will get a figure like this:
Pay attention to the corner. The whole figure shows a circle, but not a circle. Well, isn't that nonsense?
Okay. What is the use of such a graph? Is it possible to make waves?
That's right! That's amazing. :) Let's Scroll the figure above (rotate) to see the effect:
A lot of people may not understand the intention of rotation, but they will stare at it and see the ups and downs similar to the waves.
Our purpose is to use the dynamic change of the ups and downs animation to simulate the production of a wave-like effect.
Implementation
Of course, here we see a panoramic implementation chart, so it is not obvious. OK. Let's use examples to see what the implementation can achieve.
We can use the above principle to achieve a wave movement background:
The floating wave effect behind the scenes actually utilizes the aboveborder-radius: 45%The elliptical shape is only magnified many times.overflow: hidden, Leaving only one edge field of view, and adding some correspondingtransformTransform.
Note that the background is blue and the motion is white elliptical.
The Code is also very simple. The SCSS code is as follows:
body {    position: relative;    align-items: center;    min-height: 100vh;    background-color: rgb(118, 218, 255);    overflow: hidden;    &:before, &:after {        content: "";        position: absolute;        left: 50%;        min-width: 300vw;        min-height: 300vw;        background-color: #fff;        animation-name: rotate;        animation-iteration-count: infinite;        animation-timing-function: linear;    }    &:before {        bottom: 15vh;        border-radius: 45%;        animation-duration: 10s;    }    &:after {        bottom: 12vh;        opacity: .5;        border-radius: 47%;        animation-duration: 10s;    }}@keyframes rotate {    0% {        transform: translate(-50%, 0) rotateZ(0deg);    }    50% {        transform: translate(-50%, -2%) rotateZ(180deg);    }    100% {        transform: translate(-50%, 0%) rotateZ(360deg);    }}
For ease of writing a DEMO, the unit of length used is VW and HH. I don't know much about the two units. Here we can stamp them: How much is the value of the following two units: hh, vw, vmin, and vmax?
Some of you may still have questions. OK. We will scale down the above effect by 10 times and fill in the animations outside of the field of vision. In fact, the principle of generating waves is as follows:
The dotted box in the figure is our actual field of view.
Points worth exploring
It is worth noting that here we generate a wave, instead of using the rotating elliptical itself, but using it to cut the background and produce a wave effect. So why don't we directly use the rotating elliptical itself to simulate the wave effect? Because
 
 

  
  
High in the middle, the low effects on both sides do not conform to the principle of physics, and it looks awkward;
 
 
Click here to see the following example:
CodePen Demo -- pure css wave
 
Implement a wave progress chart using pure CSS
Well, now that we have mastered this method, we will use pure CSS to implement the above wave progress chart that can be implemented only by using SVG or CANVAS.
The HTML structure is as follows:
<div class="container">    <div class="wave"></div></div>
The CSS code is as follows:
.wave {    position: relative;    width: 200px;    height: 200px;    background-color: rgb(118, 218, 255);    border-radius: 50%;     &::before,    &::after{        content: "";        position: absolute;        width: 400px;        height: 400px;        top: 0;        left: 50%;        background-color: rgba(255, 255, 255, .4);        border-radius: 45%;        transform: translate(-50%, -70%) rotate(0);        animation: rotate 6s linear infinite;        z-index: 10;    }        &::after {        border-radius: 47%;        background-color: rgba(255, 255, 255, .9);        transform: translate(-50%, -70%) rotate(0);        animation: rotate 10s linear -5s infinite;        z-index: 20;    }}@keyframes rotate {    50% {        transform: translate(-50%, -73%) rotate(180deg);    } 100% {        transform: translate(-50%, -70%) rotate(360deg);    }}
:
CodePen Demo -- Pure Css Wave Loading
Although the effect is a little worse, but compared to SVG or CANVAS, which requires a higher learning cost, this pure CSS method can undoubtedly be used in more scenarios, and the learning cost is lower!
 
Tips
Simply letborder-radiusThe animation effect may not be so good when the rotation is close to 50. We can add some other conversion factors to make the animation effect look more realistic:
 
 

  
  
Dynamic Changes During the animation processborder-radiusValue;
  
  
During the animation process, transform is used to perform slight displacement and deformation on the rotating elliptic;
  
  
As shown above, multiple ovans rotate at the same time to give an animation with different lengths, and add a slight transparency to make the entire effect more realistic.
 
 
Last
CSS articles of the series are summarized in my Github and are continuously updated. You are welcome to click a star subscription to add to favorites.
Now, this article is over. I hope it will help you :)
If you have any questions or suggestions, you can have a lot of discussions, original articles, and only a few articles. If there are any mistakes in this article, please let us know.