How to implement lowpoly animation effect on any image with CSS3

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

It should be noted here that the PDF generated by this software has an unprocessed base map, and the SVG file There is an tag, so you can add a few more points on the edge, or cut off part of it to prevent hollowing out on the edge.

If you only need a background image, you can customize the size, color and lattice size, support Generate SVG format. For example:

If the image generated using this

is not processed, it will have a path tag and a stroke. Attributes need to be processed in AI, select all, and remove all stroke attributes. At this time, the exported SVG file is the corresponding polygon tag . As of this step, our graphics processing part is over, and the rest is the realization of animation effects

CSS3 animation Let me first talk about the preliminary idea of ​​animation implementation. I want these generated polygonal fragments to change in rotation, displacement and size. This is also an effect that is easy to achieve with CSS, but what I need is different effects of scattering, different directions of displacement, different distances, and scaling. Different, but I am a

scumbag who can’t write random functions. Fortunately, CSS3 provides a powerful selector nth-of-type(an+b), using With it, I can give different animation property values ​​to different polygon fragments.

Briefly understand nth-of-type(an+b), n starts from 0 and adds 1 in sequence, so you will get the a+b, 2a+b, 3a+b... elements .

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

Now attach all the codes and comments

Combined with the following Let’s talk about the whole code:

Since SVG breaks into full screen after executing the animation effect, if our animation is set to have the effect of breaking when the mouse moves in and restoring when the mouse moves out, an area is needed to trigger the action. This is the meaning of our definition of cover, and the hierarchical attributes are higher than the SVG attributes.

Regarding the triggering of animation effects, I use :hover when the mouse passes. If you need other triggers events, you can ask for help from the front-end siege lion.

The overflow attribute of svg must be defined as visible to ensure that the part beyond the svg size is visible after the animation effect.

Regarding the setting of polygon animation attributes, this transition: all 1s ease means that all animation times are 1s and the easing effect is. transform-origin: 50% 50% defines the origin of the transformation as the center of each element.

Regarding 6 different sets of animation effects, I set the displacement translate, scaling scale, selection rotate and transparency opacity changes.

For the displacement of the X-axis and Y-axis, it is recommended to define a range yourself. The larger the value, the higher the diffusion. For example, my X and Y directions are both -800%~800%. In addition, regarding the angle of rotation, rotate(), in order to comply with the laws of physics, the farther the offset path is, the greater the angle of rotation, and vice versa.

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

If you are too lazy to modify it, the UI designer only needs to replace the tag that he made (or automatically generated) when applying this template. For example, if we try to apply that background image, we can easily get the following animation effect.

##Summary of knowledge points

The above is the detailed content of How to implement lowpoly animation effect on any image with CSS3. For more information, please follow other related articles on the PHP Chinese website!