Maison >interface Web >tutoriel CSS >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.
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>rrreeeLe noyau est :
L'extérieur est défini avec
overflow: hideen code>'s mask
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 : 🎜🎜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!