Shulou(Shulou.com)06/01 Report--

This article mainly explains "how CSS offset-path makes elements move along irregular paths". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "CSS offset-path 's method of making elements move along irregular paths".

First, left and right words and pay attention to others

The best way to make an element move along an irregular path is to use "SVG SMIL animation". I have written a special article before, see "Super powerful SVG SMIL animation Animation explanation", and the support of all browsers except IE browser is quite good, as shown in the screenshot below:

"SVG SMIL animation" although powerful, but because it is based on the HTML attribute to generate a variety of effects, because there are easy to reuse problems, such as different locations of different elements of the irregular path animation is the same, then I set up, either redundant verbose, or cross is not conducive to maintenance, a little early years in the HTML tag to write style style taste.

Perhaps for this reason, Chrome browsers are beginning to show signs of abandoning "SVG SMIL animation" and embracing CSS, which has been successfully validated for decades. Offset-path can almost be seen as the new darling of Chrome browsers for moving elements along irregular paths.

But after all, it is a new darling, so its compatibility is still two blocks lower than that of "SVG SMIL animation".

But there are some internal projects that only need to be compatible with browsers, so offset-path actually has an opportunity to use its talents.

Offset-path was not called offset-path before.

At the beginning, the offset-path attribute is not called offset-path, but called motion-path, because it is clearly defined by the specification, as shown in the screenshot below:

In fact, not only motion-path, but also other motion-* attributes are beginning to start with offset-*. For example, the original motion-offset is now offset-distance.

According to some sources, the previous syntax began in September 2015 and will be removed in the M58 version, around April 2017, that is, when motion-path these attributes Chrome will be brutally abandoned next month. In order to avoid such a terrible thing, from now on, we all start to use the property names of the new specification.

However, the demo example in this article is a mixture of new and old syntax, because the main purpose of demo is to demonstrate and does not represent the actual application, so you don't have to pay attention to this detail.

3. Offset-path allows elements to move along irregular paths

Using the CSS attribute to make the element move irregularly is much easier than using the HTML attribute to control it. For example, we only need the following lines of CSS to achieve the desired effect, such as:

. horse-run {offset-path: path ("M10 offset-distance 80q100120 120jue 20q140 copyright 50160Power0"); animation: move 3s linear infinite;} @ keyframes move {100% {offset-distance: 100%;}}

You can achieve the effect of a horse running along an irregular path. You can click here: CSS offset-path implements the horse's irregular path to keep running demo

Two CSS attributes are used, one is offset-path, which represents the path of motion, and the other is offset-distance. I am the distance of motion, which can be a numeric or percentage unit. If it is 100%, it means that all the roads have been finished.

4. Other offset-* motion-related attribute values

In addition to the two CSS attributes offset-path and offset-distance, there are other related attributes, such as offset-rotation (offset-rotate is displayed in the specification, which is not recognized by the browser), which indicates the angle of motion. The default is auto, which means that the tangent direction of the current path is automatically calculated and advances in this direction. Therefore, the above horse will have a visual sense of automatic climbing.

But if we set an angle, such as setting:

Offset-rotation: 30deg

Then the horse knew at a glance that he didn't sleep well last night, got a pillow, and could only keep his head up in one position:

In addition to setting a fixed angle value, we can also use keyword attribute values, such as:

Offset-rotation: reverse

The horse immediately ran upside down, as shown in the following screenshot:

We can even combine attribute values, such as:

Offset-rotation: auto 30deg

It means to rotate another 30 degrees in the original tangent direction, for example, when the previous value is auto, the horse looks forward on the flat ground, but now it is to see whether its hooves are beautiful:

Besides offset-rotation, there are other related CSS properties, including offset-position and offset-anchor.

Where offset-anchor represents the center point of the anchor, and its attribute value is similar to transform-origin, which can be:

# item1 {offset-anchor: right top;} # item2 {offset-anchor: right bottom;} # item3 {offset-anchor: left bottom;} # item4 {offset-anchor: left top;} # item5 {offset-anchor: center;}...

Wait, when the element moves, it causes this point to coincide with the path.

Offset-position specifies the initial location of the path and behaves like the property background-position.

According to my tests, Chrome browsers recognize the offset-position and offset-anchor attributes, but the horse has not changed at all, even if there is a pixel shift or rotation. Maybe I used it in the wrong way, so I can only mine the performance of these two attributes from the canonical example:

The offset-position values of the four known elements are:

Offset-position: 90% 20% position: 100% 100% position: 50% 100%

When the offset-anchor value is center, it is shown in the following figure (SVG chart, IE9+):

The plus sign in the image above indicates the location of the anchor point determined by offset-anchor.

When the offset-anchor value is auto, the behavior is exactly the same as the percentage parsing of the background-position attribute in CSS2.1:

The picture is very clear and easy to understand. If you follow the performance shown in the above two specification graphs, the browser should have some performance, and I guess it is very likely that the browser has not fully parsed it yet, after all, the specification has only just been updated.

At this point, I believe you have a deeper understanding of "CSS offset-path 's method of making elements move along irregular paths". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.