Css3 makes it easy for us to use the new features of CSS3 to achieve a variety of shapes and motion effects. In this article, WE introduce how to use CSS3 to achieve water wave animation in the H5-Dooring editor.

Because of the generatedgifThe tool is weak (online beg easy to usemacversiongifRecording generation tool…) I had to upload the original image, so you can imagine.

Next, we will study the implementation principle and implementation method.

Animation and dismantling

To implement curves with pure CSS, our first instinct is to use the border-radius property. For example, to implement a circle, we just need to set the following:

.circle {
  border-radius: 50%;
}
Copy the code

To achieve ellipse, sector and semi-ellipse, you just need to set the rounded corners of different sides as follows:

.circle {
  border-radius: 50% 100% 40% 60%;
}
Copy the code

The above code looks like this:

Let’s imagine, if it’s a closed curve, can we do it the same way?We just need to putbackgroundSwitch toborderAnd adjust theborder-radiusNext, let’s take a look at a graph I drew with CSS for your reference:

Of course, using the same principle we can achieve more interesting patterns, the author here is not an example.

Back to the subject, let’s look at the implementation principle of water wave animation. First of all, irregular animation we implemented, the rest of the work is how to implementThe wavesandThe waves animation, referring to the implementation scheme of irregular graph above, wavy line production can be achieved by similar cutting, as follows:As can be seen from the figure above, we usecsstheborder-radiusTo make a rectangle and a rounded rectangle, usetransformTo set offset and rotation, you can achieve the bottom after cuttingsurface.Finally we useanimationAnimation makes it move to see the effect:

We just need to optimize the above animation to make the background softer, such as circle, container overflow hide, so that we can implement the h5-Dooring editor in the water wave animation, CSS source:

.dragPay {
      position: absolute;
      z-index: 99999;
      left: 414px;
      top: 156px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      border: 3px solid #20c961;
      background: #ffffff;
      overflow: hidden;
      padding: 5px;
      box-sizing: border-box;
}
.dragPay .wave {
    position: relative;
    left: -8px;
    width: 60px;
    height: 60px;
    background-image: linear-gradient(-180deg.#8dec8a 13%.#70cf23 91%);
    border-radius: 50%;
    line-height: 60px;
    text-align: center;
    font-size: 32px;
    cursor: pointer;
}
.dragPay .waveMask {
    position: absolute;
    width: 120px;
    height: 120px;
    top: 0;
    left: 50%;
    border-radius: 40%;
    background-color: rgba(255.255.255.0.9);
    transform: translate(-50%, -82%) rotate(0);
    animation: toRotate 10s linear -5s infinite;
    z-index: 20;
    pointer-events: none;
}
@keyframes toRotate {
    50% {
    transform: translate(-50%, -70%) rotate(180deg);
    }
    100% {
    transform: translate(-50%, -70%) rotate(360deg); }}Copy the code

The HTML structure is as follows:

<div class="dragPay">
    <div class="wave">
      <span>⛽ ️</span>
    </div>
    <div class="waveMask"></div>
</div>
Copy the code

Of course we can use pseudo-elements to optimize the DOM structure. You can feel it for yourself.

More CSS3 cases/learning tips

  • Skillfully use CSS rounded corners to achieve some interesting loading animation
  • Handlift an online CSS triangle generator
  • How to use CSS3 to achieve a class live queue animation
  • “Front-end Combat Summary” using CSS3 to achieve cool 3D rotation perspective
  • “CSS” using pseudo-elements to achieve super useful icon library (attached source code)
  • Css3 to achieve stunning background of the interviewer background animation (advanced attached source code)

The last

H5-dooring is still evolving at a rapid pace,

  • Github address: github.com/MrXujiang/h…
  • ℹ️ Issue address: github.com/MrXujiang/h…
  • The official documentation

Dooring Update logs

  1. Photo gallery supports custom image upload
  2. Fix hidden bug in preview page method
  3. The Dooring document adds deployment and secondary development documents, including:
1. Dooring Development document iteration 2. Form components support layout concepts 3. Supports batch import and deletion of form data. 4. Supports custom upload of icon componentsCopy the code

The recent planning

  1. Improve API documentation
  2. PC page editor
  3. Beta version).