Introduction to the usage of clip-path in CSS3

1. Basic concepts

When refreshing the QQ space dynamic, an advertisement is found. As the user slides the dynamic list up and down, the advertising image will be automatically switched. This effect is not great for the mobile terminal. As for the screen, it is undoubtedly a very subtle consideration. How is this effect achieved?

Next, let’s talk about the specific implementation ideas of this effect:

1. Position the two pictures and stack them together relative to the picture container;

2. Select a center point in the upper left corner or lower right corner of the image container, draw a circle, and continue to increase the radius of the circle to display the second image;

3. Swipe up When pulling down, the radius of the circle is dynamically changed according to the sliding speed;

4. When the distance between the picture container and the top or bottom of the screen is 0, the picture stacking order and circle center position are changed accordingly.

Why can the second picture be displayed when a circle is drawn on the picture? Having said that, we have to talk about our protagonist today, clip-path, quoting the description on MDN:

The clip-path attribute can create a clipping area where only part of the element can be displayed. Parts within the area are displayed and parts outside the area are hidden. The clipping region is defined by a reference to an embedded URL or a path to an external svg, or as a shape such as circle(). The clip-path property replaces the now-deprecated clip property.

The meaning of clip-path is the clipping path. Through the specified closed path or shape, or even the shape defined by the clipPath tag in SVG, part of the area that needs to be retained is cut out, so that the layout in the web page can be implemented in many ways. Kind of diverse.

Before clip-path appeared, the clip attribute in CSS2.1 also had a clipping effect, but it only supported rectangles and only took effect on elements with position:absolute or position:fixed. The usage method is as follows:

clip: rect(60px, 60px, 60px, 60px); // 标准写法
clip: rect(60px  60px  60px  60px); // 兼容 ie 及 火狐浏览器

Note: The order of rect parameters is top, right, bottom, left

All mainstream browsers support the clip attribute, and it still has its use in the display of Sprite images (CSS Sprite) However, due to the limitations of the clip attribute, clip has been replaced by clip-path. In normal development, we can use attributes such as border and border-radius to create simple patterns such as triangles, circles or rounded rectangles. clip-path provides us with more possibilities. Combined with SVG's path, animate and other tags, we can create more patterns. Interesting pattern.

2. Usage practice

The clip-path attribute can cut out many graphics, such as circle, ellipse, polygon, and inset. You can also use animation and SVG's clipPath tag.

circle

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

ellipse ellipse

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

inset

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

polygonpolygon

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

url

<section class="container">
  <img src="img01.jpg" class="contract">
  <img src="img02.jpg">
</section>
<svg height="0" width="0">
  <clipPath id="clip02">
    <circle cx="400" cy="210" 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;
}

worth it The explanation is that SVG's clipPath tag can be used to wrap animate. The attributeName of the animate tag refers to setting the radius of the circle. Values ​​can set the frame of the animation. There can be multiple values ​​separated by semicolons. Dur refers to the duration of the animation. repeatCount. Refers to the number of animations.

Compatibility

Currently neither IE nor Edge support this attribute. Firefox only partially supports clip-path, which means it only supports shapes and URL(#path) syntax for inline SVG. Chrome, Safari, and Opera require the -webkit- prefix to be compatible with this property. External SVG shapes are not supported. For more compatibility information, click here to view clip-path browser compatibility.

3. Experience Summary

Using URL (#path) inline SVG, we can easily cut out complex shapes, and can also include some vivid animation effects, such as Adding a fan-shaped mask to the countdown of cards and betting in a poker game, or adding countdown progress on the edge of a rectangle, loading animation, etc., can all be cleverly implemented using the clip-path attribute. At the same time, using the clip-path attribute can Relative units can be used flexibly when cropping graphics.

Related recommendations:

CSS clip-path

Detailed explanation of how to use the clip-path area cropping attribute in CSS

Fragment splicing animation of any element based on clip-path_html/css_WEB-ITnose

The above is the detailed content of Introduction to the usage of clip-path in CSS3. For more information, please follow other related articles on the PHP Chinese website!