Use css3 to achieve windmill effect_html/css_WEB-ITnose

As mentioned before, css3 can replace many effects achieved by js. In fact, many times pure css3 can even replace pictures. You can draw some simple pictures directly using css3. Although the effect of pictures drawn with CSS3 may not be as good as using pictures directly, the implementation is also more complicated. The most troublesome thing is the compatibility issue, which is not as direct and practical as pictures. But thinking about solutions to problems in a different way can often inspire us and help us learn CSS3.

The demo given below will compare the windmill effect achieved with pictures and pure CSS3.

Let’s take a look at the static renderings first:

Windwheel animation renderings implemented with pure CSS3

The following is a brief introduction to how I use pure CSS3 To realize the animation effect of a windmill,

1. Draw the pillars of the windmill

We can see that the pillars of the windmill are an equilateral trapezoid. Through width, With the height attribute and border, we can realize many geometric figures, such as triangles, trapezoids, etc. You can refer to the trapezoid implementation method below to try the implementation of other figures yourself.

1. display: block;
2. height: 0;
3. width: 4px; ;
4. border-style: none solid solid;
5. border-color: transparent transparent white;

Rendering

Achieving the effect of windmill columns

2. Draw the axis of the windmill

This step is relatively simple and can be easily achieved using the border-radius fillet attribute.

width:4px;

1. height:4px;
2. border:3px #fff solid;
3. border-radius:5px; 🎜>3. Draw the leaves of the windmill
The realization of the leaves of the windmill is the same as that of the pillars, except that the trapezoid is inverted.

height: 0;

width: 2px;

border-width: 50px 2px 0px 2px; : solid solid none;

border-color: white transparent transparent ;

4. Position the pinwheel page

Use here It is implemented by rotate (rotation) of transform in css3. One thing to note is that when using rotate, you must first use origin to locate the center of the rotation. The default is the center of the element. Here we need to position it at the top of the element.
-webkit-transform-origin:0px 0px;
-webkit-transform:rotate(60deg);
Effect diagram

Windmill fan page to achieve the effect

Use the above method to draw three windmill fans in sequence, and position the angles.

1. 5. Realize the dynamic effect of the fan page
The static windmill is drawn, and the next thing we have to do is to make it move. .

Earlier we could position the fan page as a child element of the axis element, so that we only need to achieve the rotation effect of the axis to make the fan page move accordingly.

The following is the implementation of animation

@-webkit-keyframes rotate{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate (360deg)}} 

Put the implemented animation method rotate into our axis element, and the fan page can move.

-webkit-animation: rotate 4s linear infinite;

6. Improve effects and achieve compatibility

At this point our windmill is basically completed. The previous codes are compatible with webkit core browsers (chrome, safari). Next, we will implement compatibility with other browsers and add a mouse hover to speed up the rotation. Our windmill is now complete.
The performance of css3 is different in various browsers. The best effect is under Chrome browser. The pillars of the windmill under Safari will have pixel distortion issues (the same is the core of webkit, I don’t know why the performance is so bad) are different), we will try to solve this problem in the future.

Demo and download address are provided below

Windmill effect achieved by css3
1. Download
(