耀极客论坛

 找回密码
 立即注册
查看: 699|回复: 0

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

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220555
发表于 2022-5-9 00:25:52 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了JS利用 clip-path 实现动态区域裁剪功能,文中主要通过使用 box-shadow 实现,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
背景
  今天逛 CodePen,看到了这样一个非常有意思的效果:

  CodePen Demo -- Material Design Menu By Bennett Feely
  这个效果还是有一些值得探讨学习的点,下面我们一起来看看。
如何实现这样一个类似的效果?
  首先,想一想,如果让你去实现上面的效果,你会怎么做呢?
  这里我简单罗列一些可能的办法:
       
  • 阴影 box-shadow   
  • 渐变 radial-gradient   
  • 缩放 transform: scale()
  快速的一个一个过一下。
使用 box-shadow 实现
  如果使用 box-shadow,代码大致如下:
  1. ‹div class="g-container">
  2.     ‹div class="g-item">‹/div>
  3. ‹/div>
复制代码
  1. .g-container {
  2.     position: relative;
  3.     width: 400px;
  4.     height: 300px;
  5.     overflow: hidden;
  6. }
  7. .g-item {
  8.     position: absolute;
  9.     width: 48px;
  10.     height: 48px;
  11.     border-radius: 50%;
  12.     background: #fff;
  13.     top: 20px;
  14.     left: 20px;
  15.     box-shadow: 0 0 0 0 #fff;
  16.     transition: box-shadow .3s linear;
  17.    
  18.     &:hover {
  19.         box-shadow: 0 0 0 420px #fff;
  20.     }
  21. }
复制代码
  核心就在于:
       
  • 外层一个设置了 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
使用渐变 radial-gradient 实现
  下面我们使用径向渐变 radial-gradient 加上 CSS @property,也可以还原上述效果:
  1. ‹div class="g-container">‹/div>
复制代码
  1. @property --size {
  2.   syntax: '‹length>';
  3.   inherits: false;
  4.   initial-value: 24px;
  5. }
  6. .g-container {
  7.     position: relative;
  8.     width: 400px;
  9.     height: 300px;
  10.     overflow: hidden;
  11.     background: radial-gradient(circle at 44px 44px, #fff 0, #fff var(--size), transparent var(--size), transparent 0);
  12.     transition: --size .3s linear;
  13.    
  14.     &:hover {
  15.         --size: 450px;
  16.     }
  17. }
复制代码
  我们通过控制径向渐变的动画效果,在 hover 的时候,让原本只是一个小圆背景,变成一个大圆背景,效果如下:

  emmm,效果确实是还原了,问题也很致命:
       
  • 由于是背景的变化,所以鼠标不需要 hover 到小圆上,只需要进入 div 的范围,动画就会开始,这显然是不对的   
  • 和第一种 box-shadow 的方法类似,隐藏在白色之下的导航元素的 DOM 不好放置
  上述 Demo 的代码 -- CodePen Demo -- radial-gradient zoom in animation
  emmm,还有一种方法,通过缩放 transform: scale(),也会存一定问题,这里不继续展开。
  所以到这里,想实现上述的效果,核心在于:
       
  • 鼠标要 hover 到圆上,才能开始动画,并且,鼠标可以在展开后的范围内自由移动,且不会收回动画效果   
  • 动画展开后,里面的 DOM 的放置,不能太麻烦,能不借助 Javascript 去控制里面内容的显示隐藏最好
利用 clip-path 实现动态区域裁剪
  所以,这里,我们其实是需要一个动态的区域裁剪。
  在我的这篇文章中 -- 如何不使用 overflow: hidden 实现 overflow: hidden?,介绍了 CSS 中几种裁剪元素的方式,而其中,最适合利用在这个效果的,就是 -- clip-path。
  利用 clip-path,可以非常好的实现,动态裁剪的功能,并且,代码也非常简单:
  1. ‹div class="g-container">‹/div>
复制代码
  1. .g-container {
  2.     position: relative;
  3.     width: 400px;
  4.     height: 300px;
  5.     overflow: hidden;
  6.     transition: clip-path .3s linear;
  7.     clip-path: circle(20px at 44px 44px);
  8.     background: #fff;
  9.    
  10.     &:hover {
  11.         clip-path: circle(460px at 44px 44px);
  12.     }
  13. }
复制代码
  我们只需要利用 clip-path,在最开始的时候,将一个矩形 div,利用 clip-path: circle(20px at 44px 44px) 裁剪成一个圆,当 hover 的时候,扩大裁剪圆的半径到整个矩形范围即可。
  效果如下:

  这样,我们就能完美的实现题图的效果,并且,内置的 DOM 元素,直接写进这个 div 内部即可。
  1. ‹div class="g-container">
  2.     ‹ul>
  3.         ‹li>11111‹/li>
  4.         ‹li>22222‹/li>
  5.         ‹li>33333‹/li>
  6.         ‹li>44444‹/li>
  7.     ‹/ul>
  8. ‹/div>
复制代码
  效果如下:

  CodePen Demo -- clip-path zoom in animation
  很有意思的一个技巧,利用 clip-path 实现动态区域裁剪,希望大家能够掌握。
  到此这篇关于JS利用 clip-path 实现动态区域裁剪功能的文章就介绍到这了,更多相关clip-path区域裁剪内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-7 11:41 , Processed in 0.076446 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表