Implement the windmill effect with css3, and implement the windmill effect with css3

Implement the windmill effect with css3, and implement the windmill effect with css3

As mentioned above, css3 can replace many js implementations. In fact, in many cases, pure css3 can even replace images. You can use css3 to draw some simple images. Although the effects of images drawn by css3 may not be as good as those drawn by using images directly, the implementation is also complicated. The most troublesome problem is the compatibility problem. However, a different way of thinking about the problem can often inspire us and help us to learn css3.

The demo below will be used to compare the effects of windmills implemented by the image and pure css3.

First look at the static:

Windmill animation implemented by pure css3

The following briefly introduces how I use css3 to implement the animation effect of a windmill,

1. Draw the pillar of the windmill

We can see that the column of the windmill is an equi-edge trapezoid. With the width and height attributes combined with border, we can implement many geometric figures, such as triangles and trapezoid, you can try the implementation of other images by referring to the implementation method of the trapezoid below.

1. Display: block;
2. Height: 0;
3. Width: 4px;
4. Border-width: 0 4px 80px 4px;
5. Border-style: none solid;
6. Border-color: transparent white;

Implementation of the windmill Column

2. Draw a windmill axis

This step is relatively simple and can be easily implemented using the border-radius rounded corner attribute.

1. Width: 4px;
2. Height: 4px;
3. Border: 3px # fff solid;
4. Background: # a5cad6;
5. Border-radius: 5px;

Implementation of the windmill axis

3. Draw the leaves of a windmill

The implementation of the windmill leaf is the same as that of the pillar, except that the trapezoid is reversed.

1. Height: 0;
2. Width: 2px;
3. Border-width: 50px 2px 0px 2px;
4. Border-style: solid none;
5. Border-color: white transparent;

4. Locate the windmill page

Here, the rotate (rotation) of transform in css3 is used. One thing to note is that when rotate is used, the origin is used to locate the center of the rotation, which is the center of the element by default, here we want to locate at the top of the element.

1. -Webkit-transform-origin: 0px 0px;
2. -Webkit-transform: rotate (60deg );

Windmill fan page Implementation Effect

Use the above method to draw three fan planes in sequence and locate the angle.

 

5. Implement Dynamic fan page Effects

The static windmill has been drawn. Next we need to make it work.

Previously, we can locate the fan page as a child element of the Axis element, so that as long as we achieve the rotation of the axis, we can let the fan page also move.

Below is the implementation of Animation

1. @-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 be moved.

1. -Webkit-animation: The rotate 4S linear infinite;

6. Improve the effect and achieve compatibility

So far, our windmills have basically been completed. The previous code is compatible with the core webkit browsers (chrome and safari). Next, we will implement compatibility with other browsers, in addition, the effect of speeding up the rotation of the mouse is completed.

The performance of css3 varies with different browsers. The chrome browser has the best effect, and the column of the safari windmill has the pixel distortion problem (same as the core of webkit, I don't know why the performance is so different). I will try to solve this problem later.

The demo and

Windmill effect implemented by css3 Download(