CSS3 complete the picture Lowpoly animation effect of the process detailed

This article mainly introduces the CSS3 implementation of any image Lowpoly animation effect instance, which is a combination of CSS3 animation properties of Lowpoly (low-poly style) effect, the main use of CSS3 transform properties of rotate rotation, Translate mobile, scale scaling

This is a combination of lowpoly (low poly style) effect using the animated properties of the CSS3, mainly utilizing the rotate rotation of the CSS3 transform properties, translate movement, scale scaling, the CSS code part is very simple, the only interesting is The use of the Nth-of-type selector, where the UI designer small partners do not have to be deterred, the CSS section can be completely used to re-use and according to their own requirements to change parameters (all the SVG animation code can not be reused bullying), and then, the UI designer and then with their familiar AI weapon, can be perfect to achieve the following effect.

Split-Step Disassembly:

1. Production of low-poly-style images

My original image is the following:

Readily from the computer to find a background map, and then with the help of an artifact image triangulator, have to sigh, this tool is really good, you need to do the designer just in the picture to dot (I was to test, very coarse added vertex, if need to get very good effect, Need to be added fine at the edges of the shading).

Then export the file in PDF format and you can open it with AI.

2. Processing of pictures

Here in the AI need a step important action, "release clipping mask", if you do not do this, the generated SVG code will have a large number of path clipping mask tags <clipPath> and polygon clip-path properties.

After releasing the clipping path, you can see that the picture is now made up of a triangle of color blocks.

Export the SVG code to see a dense polygon label <polygon fill="" points=""/> .

Image Triangulator generates lowpoly-style images; AI processing, releasing clipping masks

Note here that the PDF generated by this software is an unhandled basemap with an tag in the SVG file, so you can add a few more points to the edge or cut off some of the edges to prevent hollowing out.

3. Processing of online generated low-poly background images

If you need only a background map, we recommend that you use site qrohlf.com/trianglify-generator/, which allows you to customize size, color, and lattice size to support the generation of SVG formats. such as the following:

The image generated using this online tool will be a <path> path tag, with a stroke attribute that needs to be processed in the AI, select all, and remove all stroke attributes. At this point, the exported SVG file is the corresponding polygon label <polygon>.

As of this step, our graphics Processing section is over, and the rest is the implementation of the animation effect

4. CSS3 Animation

Let's start with the initial idea of animation implementation. I want these already generated polygon fragments to rotate, shift and size changes, which is very easy for CSS to achieve an effect, but I need to scatter the different effects, the direction of the displacement, distance, zoom different, but I this kind of JavaScript slag will not write random function, Fortunately CSS3 provides a powerful selector for Nth-of-type (an+b), using it, I can give different animation attribute values to various polygon fragments.

A simple look at Nth-of-type (an+b), n from 0 to take the value, followed by 1, so you will get A+b, 2a+b, 3a+b ... Elements.

For example, I want my <polygon> polygon to be divided into 6 groups, each set different animation properties, my writing is as follows:

Polygon:nth-of-type (6n+1) {transform:translate (x, y) scale () rotate ();}

This is the order for 6n+1 (ie 1,7,13,19 ... The animation effect of the polygon, similarly, the next group is Polygon:nth-of-type (6n+2), that is, the selection of the first 2,8,14,20 ... A polygon, pushing backwards until polygon:nth-of-type (6n+6)

Now enclose all the code and comments

Say it all with the following code:

Since SVG is broken into full screen after the animation effect, if our animation is to be set to mouse into the broken, the mouse to move out of the restoration of the effect, we need an area to trigger the action, this is what we define the meaning of cover, and the level of attributes higher than the SVG attribute.


On the trigger of animation effect, I use: hover mouse, need other trigger event can help front siege lion.

The overflow attribute of SVG must be defined as visible and visible, so that parts of the SVG dimension that are beyond the size of an animated effect can be seen.

With regard to the setting of the animated properties of polygon, this transition:all 1s ease indicates that all animation time is 1s, easing effect. transform-origin:50% 50% defines the origin of the transformation for each element of its own center.

With regard to the 6 different animation effects, I set the displacement translate, zoom scale, select rotate and the change of transparency opacity.

Here the x-axis and y-axis displacement, it is recommended to delimit a range, the greater the value, the higher the degree of diffusion, such as my x and y direction are -800%~800%. In addition to the angle of rotation, rotate (), in order to conform to the physical law, the farther the offset of the path the angle of rotation is greater, and vice versa.

If you want to set more different effects, you only need to change Nth-of-type (an+b) in the n coefficient a.

If you're too lazy to modify it, the UI designer will need to replace it with the <polygon> tag you created (or automatically generated) when applying the template. For example, if we try to apply the background map, we can easily get the following animation effect.


Summary of Knowledge points

1. About the production of low poly Lowpoly style pictures (focus on making arbitrary graphics for yourself)

Use of the 2.CSS3 selector Nth-of-type (an+b)

"Recommended"

1. CSS3 Free Video Tutorial

2. Teach you to use CSS to draw standard circular patterns

3. Use CSS to implement text hyperlink text to the right plus an arrow icon

4. Tutorial on using H5 and CSS3 forms validation

5. CSS3 a code tutorial to complete a box fillet effect