Introduction to the usage of Clip-path in CSS3

First, the basic concept

Refresh QQ space dynamic, found an advertisement, with the user swipe up and down the dynamic list, will automatically switch advertising pictures, this effect on the mobile side of the screen is not very small, is undoubtedly very subtle considerations, the effect is how to achieve it?

Let's talk about the concrete implementation of this effect:

1. Two images are stacked together relative to the picture container by positioning them;

2. Select a center in the upper-left or lower-right corner of the picture container, draw a circle, and continuously enlarge the radius of the circle to display the second picture;

3. The radius of the circle is changed dynamically according to the sliding speed when the pull-down is drawn.

4. When the picture container is 0 o'clock from the top or bottom of the screen, the image stacking order and the center position are changed accordingly.

Draw a circle on the picture, why can you show the second picture? Speaking of which, we have to say the protagonist of our day Clip-path, quoting the description on the MDN:

The Clip-path property creates a clipping region that can be displayed only for parts of an element. Sections within the area are displayed, hidden outside the area. The clipping area is the path of the referenced URL definition, or the path of an external SVG, or as a shape such as circle (). The Clip-path attribute replaces the clipped clip property that is now deprecated.

The meaning of Clip-path is clipping the path, cutting out the areas that need to be preserved by specifying the closed path or shape, or even the shape defined by the Clippath tag in SVG, so that the layout implementations in the Web page can be varied.

The clip attribute in CSS2.1 also has a cropping effect before Clip-path appears, but it only supports rectangles, and is only valid for Position:absolute or position:fixed elements, using the following methods:

Clip:rect (60px, 60px, 60px, 60px); Standard notation Clip:rect (60px  60px  60px  60px);//compatible with IE and Firefox browser

Note: The order of the RECT parameters is top, right, Botton, left

All major browsers support the clip attribute, and the sprite (CSS Sprite) display still has its place, but the clip has been replaced by Clip-path due to the limitations of the clip attribute. In normal development we can use border, Border-radius and other attributes to make triangles, round or rounded rectangles and other simple patterns, clip-path for us to provide more possibilities, combined with SVG path, animate and other tags can make more interesting patterns.

Ii. Practice of usage

The Clip-path property allows you to crop many graphs, circle, ellipse, polygon, inset, and also use the Clippath tags for animations and SVG.

Circle Circle

Clip-path:circle (25% at 50% 50%);

Oval Ellipse

Clip-path:ellipse (25% 25% at 50% 50%);

Inset

Clip-path:inset (35% 35% 35% 35% round 0 70% 0 70%);

Polygon Polygon

Clip-path:polygon (50% 0, 25% 50%, 75% 50%);

Url

<section class= "Container" >     </section><svg height= "0" width= "0" >  <clippath id= "CLIP02" >    <circle cx= "All" cy= "R" = "0" >      <animate        attributetype= "CSS"        attributename= "R"        values= "0;480;0"        dur= "9s"        Repeatcount= "2"      />    </circle>  </clippath></svg>.contract {  Clip-path: URL (#clip02);  Z-index:1;}

It is worth noting that using SVG clippath tags can wrap animate, where animate label AttributeName refers to set the radius of the circle, values can animate the frame, can have multiple values separated by semicolons, dur refers to the duration of the animation, re Peatcount refers to the number of animations.

Compatibility

Both IE and Edge do not support this property at this time. Firefox only partially supports Clip-path, and some support refers to the syntax that supports only the shape and URL (#path) inline svg. Chrome, Safari, and Opera require the-webkit-prefix to be compatible with this property. External SVG shapes are not supported. For more information on compatibility, click here to view clip-path browser compatibility.

Iii. Summary of Experiences

Using the URL (#path) inline SVG, we can easily cut out the complex shape, but also can contain some vivid animation effects, such as in the poker game to add a fan-shaped mask on the countdown, or to add a countdown to the edge of the rectangle, loading animation and so on, are able to use the Clip-path property with a clever implementation, while using the Clip-path property can be used to crop the shape of the flexible relative units.