Introduction à l'utilisation du clip-path en CSS3

1. Concepts de base

Lors de l'actualisation de la dynamique de l'espace QQ, j'ai trouvé une publicité. Au fur et à mesure que l'utilisateur glisse de haut en bas dans la liste dynamique, l'image de la publicité sera automatiquement commutée. le terminal mobile. Quant à l'écran, c'est sans aucun doute une considération très subtile. Comment cet effet est-il obtenu ?

Parlons ensuite des idées spécifiques de mise en œuvre de cet effet :

1. Positionnez les deux images et empilez-les ensemble par rapport au conteneur d'images

2. Sélectionnez le centre d'un cercle dans le coin supérieur gauche ou le coin inférieur droit du conteneur d'images, dessinez un cercle et augmentez continuellement le rayon du cercle pour afficher la deuxième image

Faites glisser vers le haut Lorsque vous tirez vers le bas, le rayon du cercle est modifié dynamiquement en fonction de la vitesse de glissement
Lorsque la distance entre le conteneur d'image et le haut ou le bas de l'écran est à 0, l'ordre d'empilement des images et la position centrale du cercle sont modifiés en conséquence.
Dessinez un cercle sur l'image, pourquoi la deuxième image est-elle affichée ? En parlant de ça, nous devons parler de notre protagoniste aujourd'hui, clip-path, citant la description sur MDN :

L'attribut clip-path peut créer une zone de découpage où seule une partie de l'élément peut être affichée. Les parties situées dans la zone sont affichées et les parties situées en dehors de la zone sont masquées. La région de découpage est un chemin défini par une référence à une URL intégrée ou à un fichier SVG externe, ou sous la forme d'une forme telle qu'un cercle (). La propriété clip-path remplace la propriété clip, désormais obsolète.

La signification de clip-path est le chemin de détourage à travers le chemin ou la forme fermé spécifié, ou même la forme définie par la balise clipPath en SVG, une partie de la zone qui doit être conservée est découpée, afin que la mise en page de la page Web puisse être mise en œuvre de plusieurs manières.

Avant l'apparition de clip-path, l'attribut clip dans CSS2.1 avait également un effet de découpage, mais il ne prenait en charge que les rectangles et ne prenait effet que sur les éléments avec position:absolute ou position:fixed. suit :

Remarque : l'ordre des paramètres rect est en haut, à droite, en bas, à gauche

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

Tous les navigateurs grand public prennent en charge l'attribut clip et l'affichage du Sprite (CSS Sprite) est toujours l'a-t-il, c'est utile, mais en raison des limitations de l'attribut clip, clip a été remplacé par clip-path. Dans un développement normal, nous pouvons utiliser des attributs tels que border et border-radius pour créer des motifs simples tels que des triangles, des cercles ou des rectangles arrondis. Clip-path nous offre plus de possibilités. En combinaison avec les balises path, animate et autres de SVG, nous pouvons créer. plus de modèles.

2. Pratique d'utilisation

L'attribut clip-path peut recadrer de nombreux graphiques, tels que le cercle, l'ellipse, le polygone, l'encart, et vous pouvez également utiliser l'animation et la balise clipPath de SVG.

cercle

ellipse ellipse

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

encart

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

polygone polygone

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

url

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

Il convient de mentionner que la balise clipPath de SVG peut être utilisée pour envelopper l'animation. Le nom d'attribut de la balise animer fait référence au réglage du rayon du cercle. Les valeurs peuvent définir le cadre de l'animation. . Il peut y avoir plusieurs valeurs séparées par des points-virgules, dur fait référence à la durée de l'animation, repeatCount fait référence au nombre d'animations.

<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;
}

Compatibilité

Actuellement, ni IE ni Edge ne prennent en charge cet attribut. Firefox ne prend en charge que partiellement le chemin de clip. La prise en charge partielle signifie qu'il ne prend en charge que la syntaxe de forme et d'URL (#path) du SVG en ligne. Chrome, Safari et Opera nécessitent que le préfixe -webkit- soit compatible avec cette propriété. Les formes SVG externes ne sont pas prises en charge. Pour plus d’informations sur la compatibilité, cliquez ici pour afficher la compatibilité du navigateur clip-path.

3. Résumé de l'expérience

En utilisant l'URL (#path) en ligne SVG, nous pouvons facilement découper des formes complexes et inclure des effets d'animation vifs, tels que l'ajout d'un masque en forme d'éventail. au compte à rebours des cartes et aux paris dans un jeu de poker, ou à l'ajout de la progression du compte à rebours sur le bord d'un rectangle, au chargement d'une animation, etc., peuvent tous être intelligemment implémentés en utilisant l'attribut clip-path. L'attribut path peut Les unités relatives peuvent être utilisées de manière flexible lors du recadrage des graphiques.

Recommandations associées :

Chemin de clip CSS

Explication détaillée de la façon d'utiliser l'attribut de recadrage de la zone de chemin de clip en CSS

Animation d'épissage de fragments de n'importe quel élément basée sur clip-path_html/css_WEB-ITnose

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!