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.
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.
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 加上 CSS @property，也可以还原上述效果：
<div class="g-container"></div>
@property --size {
syntax: '<length>';
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 去控制里面内容的显示隐藏最好
所以，这里，我们其实是需要一个动态的区域裁剪。
在我的这篇文章中 -- 如何不使用 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>
overflow: hideen</ code>'s mask</p>🎜🎜🎜Lorsque l'élément interne survole, implémentez un <code>box-shadow: 0 0 0 0 #fff à box-shadow: 0 0 0 420px #fff< /code> L'effet du changement 🎜🎜🎜🎜 est le suivant : 🎜🎜<img src="https://img.php.cn/upload/image/111/482/531/1639966528900310. gif" 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 : 🎜🎜
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🎜🎜🎜
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!
tutoriel CSS3
Quelles sont les propriétés du dégradé CSS3 ?
Comment ouvrir un fichier au format CSV
Introduction au protocole xmpp
console.readline
conversion de codage Unicode
Applications logicielles de spéculation monétaire formelles et faciles à utiliser recommandées en 2024
Comment gérer les caractères chinois tronqués sous Linux
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
