The colorful canvas implementation is too tedious, which is the meaning of this paper.

rendering

dismantling

Start by drawing a simple box:

::before
::after
radius

overflow: hidden

animation

code

html

<div class="wave"></div>
Copy the code

scss

// simple box. Wave {position: relative; width: 150px; height: 150px; background-color:#5291e0;overflow: hidden; // Two irregular circles (positioned relative to the box and the distance from the bottom is wave height) &::before, &::after {content:"";
    position: absolute;
    left: 50%;
    bottom: 15%;
    width: 500%;
    height: 500%;
    border-radius: 45%;
    background-color: #fff;transform: translateX(-50%); Animation: rotate 15s Linear infinite; } // Adjust the style of one of the irregular circles to distinguish (or adjust the parameters of the animation to distinguish) &::before {bottom: 10%; opacity: .5; border-radius: 47%; @keyframes rotate {from {transform: translateX(-50%) rotateZ(0deg); } to { transform: translateX(-50%) rotateZ(360deg); }}Copy the code

conclusion

Renderings at first glance, let the “blue” part of the move, really difficult, so the use of reverse thinking, direct control of the “white” part to overflow: Hidden success, very comfortable 🍔

Phase to recommend

Contenteditable and user-modify can also be played 🌚

CSS manipulation you may not know about – form validation 🤦️

HTML directive implementation tooltip text prompt, pure CSS implementation (no scripting) ️

The last

If you think this article is good, please don’t forget to like and follow 😊