This is the 27th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

offset

The offset attribute can be used to implement irregular movement of elements. The offset property is an abbreviation for multiple CSS properties. There are offset-anchor, offset-distance, offset-path, offset-position and offset-rotate.

offset-anchor

Offset-anchor attribute is mainly used to determine the anchor point of offset movement, that is, the point where elements move along the track. Simple grammar offset – anchor: auto | < position >, auto is the initial value, the position is a concrete anchor position.

offset-distance

Offset-distance attribute represents the offset distance, that is, the distance that the element moves along the path. The attribute value can be percentage value or length value, which can be negative or greater than 100%. When the moving path is a closed path, we can use offset-distance to achieve a continuous loop and infinite motion animation effect. If the path is closed, the change of position can be seen regardless of the value of offset-distance. If the path is not closed but open, the position of negative value is the same as that of 0%, and the position of value greater than 100% is the same as that of 100%.

offset-distance: 10;
offset-distance: 66%;
offset-distance: 44px;
Copy the code

offset-path

The offset-path attribute is used to refer to the moving path. Multiple path types are supported. A lot of grammar.

offset-path: none;
offset-path: ray([<angle> && <size> && contain?] ); offset-path: <path(a) >; offset-path: <url>; offset-path: [<basic-shape> || <geometry-box>];Copy the code

The URL in the above example can directly use the path of any graphic element in an SVG element inline on the page. Ray refers to an offset that represents a ray shape, the size of which is closely related to the current element’s containing block element. The offset path of Ray is a ray whose starting position is the center of the element by default, determined by the offset-ancho attribute. The Angle of a ray is determined by Angle. The direction and position of the Angle are the same as that of the Angle in the CSS. 0deg indicates that the direction is up, and the positive Angle indicates that the ray is rotated clockwise. According to the usPS, closest side, closest corner, apneapsis, and sides, according to usPS, according to usPS, according to USPS, according to USPS. Sides represents the distance at which the ray intersects with the containing block element. If the ray’s initial position is not inside the containing block element, sides represents 0. The contain parameter indicates whether the current element is within the ray covered circle.

offset-position

Offset – the role of the position attribute is to define the starting point of the path, grammar offset – positio: auto | < position >, the characteristics of the attribute is a simple syntax, detail is various, poor support. The initial value is auto, which indicates that the offset path starts at the element’s normal position. Position Specifies the position of the start point of the offset path. When the starting point of a path changes, the corresponding offset will also change position.