[Original] CSS3 creates dynamic 3D balloons and css3 balloons

[Original] CSS3 creates dynamic 3D balloons and css3 balloons

A lot of things were found during the morning run on the riverside over the weekend.

At that time, I thought that I could implement it on the webpage.

 

After a few days, I did the following:

(Try to check the latest version in chrome or firefox)

Preview

Implementation

Many effects can be implemented in css. Here we can also take advantage of it. div sets the border-radius on three sides and then rotates it. Here is the plane "balloon ".

Animation implementation

The static balloon is ready. Next, let the balloon "move". My idea here is to draw the blue sky and white clouds on the background and let the cloud move.

 

Here, the cloud is stacked together with three circles.

Conclusion

Okay, this will let the balloon move.

 

But in general, the animation effect still seems false...

It is also somewhat distorted. It may take longer to set the animation duration.

You can also give it a try. If you like it, click [recommendation]

 

DEMO download point here