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

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

背景



今天逛 CodePen,看到了这样一个非常有意思的效果:


6b8925d3e4134747abd7ca28fe2f861b_tplv-k3u1fbpfcp-zoom-1.gif


CodePen Demo -- Material Design Menu By Bennett Feely

这个效果还是有一些值得探讨学习的点,下面我们一起来看看。


如何实现这样一个类似的效果?



首先,想一想,如果让你去实现上面的效果,你会怎么做呢?


这里我简单罗列一些可能的办法:


  1. 阴影 box-shadow
  2. 渐变 radial-gradient
  3. 缩放 transform: scale()


快速的一个一个过一下。


使用 box-shadow 实现


如果使用 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;
    }
}


核心就在于:


  1. 外层一个设置了 overflow: hideen 的遮罩
  2. 内层元素 hover 的时候,实现一个 box-shadow: 0 0 0 0 #fff 到 box-shadow: 0 0 0 420px #fff 的变化


效果如下:

1b31cca94db847d6888874621cebfffb_tplv-k3u1fbpfcp-zoom-1.gif


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


  1. 当我们的鼠标离开圆形的时候,整个动画就开始反向进行了,白色区域开始消失,如果我们要进行按钮操作,是无法完成的
  2. 隐藏在动画展开后的矩形内的元素,不容易放置


所以,box-shadow 看着虽好,但是只能放弃。上述 Demo 的代码 -- CodePen Demo -- box-shadow zoom in animation


使用渐变 radial-gradient 实现


下面我们使用径向渐变 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 的时候,让原本只是一个小圆背景,变成一个大圆背景,效果如下:

33f9334c501842558df21f1bb9164c96_tplv-k3u1fbpfcp-zoom-1.gif


emmm,效果确实是还原了,问题也很致命:


  1. 由于是背景的变化,所以鼠标不需要 hover 到小圆上,只需要进入 div 的范围,动画就会开始,这显然是不对的
  2. 和第一种 box-shadow 的方法类似,隐藏在白色之下的导航元素的 DOM 不好放置


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

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


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


  1. 鼠标要 hover 到圆上,才能开始动画,并且,鼠标可以在展开后的范围内自由移动,且不会收回动画效果
  2. 动画展开后,里面的 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) 裁剪成一个圆,当 hover 的时候,扩大裁剪圆的半径到整个矩形范围即可。


效果如下:

e456c67e41764dc8a6ef45c380d8af3d_tplv-k3u1fbpfcp-zoom-1.gif


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


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


效果如下:

d657178d452c45a0b954075dddb91e8d_tplv-k3u1fbpfcp-zoom-1.gif


CodePen Demo -- clip-path zoom in animation


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

目录
相关文章
|
7月前
|
计算机视觉 索引
【OpenCV】—ROI区域图像叠加&图像混合
【OpenCV】—ROI区域图像叠加&图像混合
|
7月前
|
数据采集 人工智能 计算机视觉
CLIP的升级版Alpha-CLIP:区域感知创新与精细控制
为了增强CLIP在图像理解和编辑方面的能力,上海交通大学、复旦大学、香港中文大学、上海人工智能实验室、澳门大学以及MThreads Inc.等知名机构共同合作推出了Alpha-CLIP。这一创新性的突破旨在克服CLIP的局限性,通过赋予其识别特定区域(由点、笔画或掩码定义)的能力。Alpha-CLIP不仅保留了CLIP的视觉识别能力,而且实现了对图像内容强调的精确控制,使其在各种下游任务中表现出色。
249 1
|
存储 算法 C++
OpenCV-图像透明区裁剪ImageCroppingTRN
OpenCV-图像透明区裁剪ImageCroppingTRN
|
C++ 计算机视觉
C++-图像目标区裁剪ImageCropping
C++-图像目标区裁剪ImageCropping
107 0
|
数据可视化 PyTorch 算法框架/工具
数据增强之裁剪、翻转与旋转
数据增强之裁剪、翻转与旋转
157 0
数据增强之裁剪、翻转与旋转
【IMAQ】imaqSetImageSize() 设置图像大小
【IMAQ】imaqSetImageSize() 设置图像大小
|
前端开发
canvas反向裁剪技巧
canvas反向裁剪技巧
canvas反向裁剪技巧
|
API Android开发
【Android 内存优化】自定义组件长图组件 ( 获取图像宽高 | 计算解码区域 | 设置图像解码属性 复用 像素格式 | 图像绘制 )
【Android 内存优化】自定义组件长图组件 ( 获取图像宽高 | 计算解码区域 | 设置图像解码属性 复用 像素格式 | 图像绘制 )
176 0
【Android 内存优化】自定义组件长图组件 ( 获取图像宽高 | 计算解码区域 | 设置图像解码属性 复用 像素格式 | 图像绘制 )
|
索引
实现替换图像中指定RGB色值区域
实现替换图像中指定RGB色值区域
369 0
|
Java Maven
thumbmailator组件对图像的使用缩放、裁剪、旋转、格式钻换
thumbmailator组件对图像的使用缩放、裁剪、旋转、格式钻换
154 0