Propriété clip-path CSS3 en action : recadrage de zone dynamique

Cet article vous amènera à comprendre le chemin de détourage CSS3 (chemin de détourage) et à vous présenter comment utiliser le chemin de détourage pour réaliser un recadrage de zone dynamique. J'espère qu'il sera utile à tout le monde !

J'ai visité CodePen aujourd'hui et j'ai vu un effet tellement intéressant :

Démo CodePen -- Menu de conception matérielle par Bennett Feely

Site Web : https://codepen.io/bennettfeely/pen/ fHdFb

Il y a encore quelques points qui méritent d'être explorés et appris sur cet effet.

Comment obtenir un effet aussi similaire ?

Tout d’abord, réfléchissez-y, si on vous demandait d’obtenir l’effet ci-dessus, que feriez-vous ?

Ici, je liste simplement quelques méthodes possibles :

• shadow box-shadow

• gradient radial-gradient

• scale transform: scale()

Parcourez-les rapidement une par une.

Utilisez box-shadow pour implémenter

Si vous utilisez box-shadow, le code est à peu près le suivant : box-shadow，代码大致如下：

<div class="g-container">
    <div class="g-item"></div>
</div>

.g-container {
    position: relative;
    width: 400px;
    height: 300px;
    overflow: hidden;
}

.g-item {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    top: 20px;
    left: 20px;
    box-shadow: 0 0 0 0 #fff;
    transition: box-shadow .3s linear;
    
    &:hover {
        box-shadow: 0 0 0 420px #fff;
    }
}

核心就在于：

• 外层一个设置了 overflow: hideen 的遮罩

• 内层元素 hover 的时候，实现一个 box-shadow: 0 0 0 0 #fff 到 box-shadow: 0 0 0 420px #fff 的变化

效果如下：

整体的动画是模拟出来了，但是它最致命的问题有两个：

• 当我们的鼠标离开圆形的时候，整个动画就开始反向进行了，白色区域开始消失，如果我们要进行按钮操作，是无法完成的

• 隐藏在动画展开后的矩形内的元素，不容易放置

所以，box-shadow 看着虽好，但是只能放弃。

上述 Demo 的代码 -- CodePen Demo -- box-shadow zoom in animation

网址：https://codepen.io/Chokcoco/pen/jOLRQNy

使用渐变 radial-gradient 实现

下面我们使用径向渐变 radial-gradient 加上 CSS @property，也可以还原上述效果：

<div class="g-container"></div>

@property --size {
  syntax: &#39;<length>&#39;;
  inherits: false;
  initial-value: 24px;
}

.g-container {
    position: relative;
    width: 400px;
    height: 300px;
    overflow: hidden;
    background: radial-gradient(circle at 44px 44px, #fff 0, #fff var(--size), transparent var(--size), transparent 0);
    transition: --size .3s linear;
    
    &:hover {
        --size: 450px;
    }
}

我们通过控制径向渐变的动画效果，在 hover 的时候，让原本只是一个小圆背景，变成一个大圆背景，效果如下：

emmm，效果确实是还原了，问题也很致命：

• 由于是背景的变化，所以鼠标不需要 hover 到小圆上，只需要进入 div 的范围，动画就会开始，这显然是不对的

• 和第一种 box-shadow 的方法类似，隐藏在白色之下的导航元素的 DOM 不好放置

上述 Demo 的代码 -- CodePen Demo -- radial-gradient zoom in animation

网址：https://codepen.io/Chokcoco/pen/RwZOqWb

emmm，还有一种方法，通过缩放 transform: scale()，也会存一定问题，这里不继续展开。

所以到这里，想实现上述的效果，核心在于：

• 鼠标要 hover 到圆上，才能开始动画，并且，鼠标可以在展开后的范围内自由移动，且不会收回动画效果

• 动画展开后，里面的 DOM 的放置，不能太麻烦，能不借助 Javascript 去控制里面内容的显示隐藏最好

利用 clip-path 实现动态区域裁剪

所以，这里，我们其实是需要一个动态的区域裁剪。

在我的这篇文章中 -- 如何不使用 overflow: hidden 实现 overflow: hidden？，介绍了 CSS 中几种裁剪元素的方式，而其中，最适合利用在这个效果的，就是 -- clip-path。

利用 clip-path，可以非常好的实现，动态裁剪的功能，并且，代码也非常简单：

<div class="g-container"></div>

.g-container {
    position: relative;
    width: 400px;
    height: 300px;
    overflow: hidden;
    transition: clip-path .3s linear;
    clip-path: circle(20px at 44px 44px);
    background: #fff;
    
    &:hover {
        clip-path: circle(460px at 44px 44px);
    }
}

我们只需要利用 clip-path，在最开始的时候，将一个矩形 div，利用 clip-path: circle(20px at 44px 44px)

<div class="g-container">
    <ul>
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul>
</div>

rrreee

Le noyau est :

L'extérieur est défini avec overflow: hideen code>'s mask

🎜🎜🎜Lorsque l'élément interne survole, implémentez un box-shadow: 0 0 0 0 #fff à box-shadow: 0 0 0 420px #fff L'effet du changement 🎜🎜🎜🎜 est le suivant : 🎜🎜<img src="https://img.php.cn/upload/image/111/482/531/1639966528900310.%20gif" title="1639966528900310.gif" alt="Propriété clip-path CSS3 en action : recadrage de zone dynamique">🎜🎜L'animation globale est simulée, mais ses problèmes les plus fatals sont au nombre de deux : 🎜🎜🎜🎜Lorsque notre souris quitte le cercle, toute l'animation commence à procédez à l'envers. Maintenant, la zone blanche commence à disparaître. Si nous voulons effectuer des opérations sur les boutons, cela ne peut pas être complété 🎜🎜🎜🎜Les éléments cachés dans le rectangle agrandi animé ne sont pas faciles à placer. code>box-shadow code> Même si ça a l'air bien, je ne peux qu'abandonner. 🎜🎜🎜Code de la démo ci-dessus -- CodePen Demo -- box-shadow zoom in animation🎜🎜Site Web : https://codepen.io/Chokcoco/pen/jOLRQNy🎜🎜<h3 id="item-2-2"> Utilisez le dégradé radial-gradient pour obtenir 🎜🎜 Ci-dessous, nous utilisons le dégradé radial <code>radial-gradient plus CSS @property pour restaurer l'effet ci-dessus : 🎜rrreeerrreee🎜Nous contrôlons l'effet d'animation du dégradé radial, en survol , changez l'arrière-plan d'un petit cercle à un grand cercle. L'effet est le suivant : 🎜🎜🎜🎜emmm, l'effet est bien restauré, et le problème est aussi fatal : 🎜🎜🎜🎜Comme il s'agit d'un changement de fond, la souris ne le fait pas vous devez survoler le petit cercle, il vous suffit d'entrer la portée du div et l'animation démarrera. C'est évidemment faux. C'est similaire à la première méthode box-shadow. qui cache les éléments de navigation sous le blanc. Le DOM n'est pas facile à placer🎜🎜🎜🎜🎜Le code de la démo ci-dessus--CodePen Demo--radial-gradient zoom in animation🎜🎜Site Web : https://codepen.io/. Chokcoco/pen/RwZOqWb🎜🎜🎜emmm, il existe une autre méthode. Cette méthode, via la mise à l'échelle transform: scale(), aura également certains problèmes, qui ne seront pas développés ici. 🎜🎜Donc ici, si vous souhaitez obtenir l'effet ci-dessus, le noyau est le suivant : 🎜🎜🎜🎜La souris doit survoler le cercle pour démarrer l'animation, et la souris peut se déplacer librement dans la plage étendue sans rétracter l'effet d'animation🎜 🎜🎜🎜Une fois l'animation développée, le placement du DOM à l'intérieur ne devrait pas être trop gênant. Il est préférable de contrôler l'affichage et le masquage du contenu sans utiliser Javascript🎜🎜🎜

Utiliser. clip-path pour implémenter le recadrage de zones dynamiques🎜🎜Donc, ici, nous avons en fait besoin d'un recadrage de zone dynamique. 🎜🎜Dans cet article-- Comment implémenter overflow: Hidden sans utiliser overflow: Hidden ? , présente plusieurs façons de découper des éléments en CSS, et parmi elles, la plus appropriée pour utiliser cet effet est -- clip-path. 🎜🎜En utilisant clip-path, la fonction de recadrage dynamique peut être très bien implémentée, et le code est également très simple : 🎜rrreeerrreee🎜Il suffit d'utiliser clip-path , Au début, utilisez clip-path: circle(20px at 44px 44px) pour couper un div rectangulaire en cercle. Lors du survol, étendez le rayon du cercle de coupe à toute la plage rectangulaire. . 🎜🎜L'effet est le suivant :🎜🎜🎜🎜

这样，我们就能完美的实现题图的效果，并且，内置的 DOM 元素，直接写进这个 div 内部即可。

<div class="g-container">
    <ul>
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul>
</div>

效果如下：

CodePen Demo -- clip-path zoom in animation

网址：https://codepen.io/Chokcoco/pen/yLorrRm

很有意思的一个技巧，利用 clip-path 实现动态区域裁剪，希望大家能够掌握。

最后

好了，本文到此结束，希望本文对你有所帮助 :)

（学习视频分享：css视频教程）

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!