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

背景

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

CodePen Demo -- Material Design Menu By Bennett Feely

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

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

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

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

  • 阴影 box-shadow
  • 渐变 radial-gradient
  • 缩放 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;
    }
}

核心就在于:

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

效果如下:

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

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

所以,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 的时候,让原本只是一个小圆背景,变成一个大圆背景,效果如下:

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,可以非常好的实现,动态裁剪的功能,并且,代码也非常简单:

<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 的时候,扩大裁剪圆的半径到整个矩形范围即可。

效果如下:

这样,我们就能完美的实现题图的效果,并且,内置的 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

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

到此这篇关于JS利用 clip-path 实现动态区域裁剪功能的文章就介绍到这了,更多相关clip-path区域裁剪内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序图片选择区域裁剪实现方法

    本文介绍了微信小程序图片选择区域屏裁剪实现方法,分享给大家.具体如下: 效果图 HTML代码 <view class="index_all_box"> <view class="imgCut_header"> <view class="imgCut_header_l" bindtap='okCutImg'>开始裁剪</view> <view class="imgCut_header_

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

    背景 今天逛 CodePen,看到了这样一个非常有意思的效果: CodePen Demo -- Material Design Menu By Bennett Feely 这个效果还是有一些值得探讨学习的点,下面我们一起来看看. 如何实现这样一个类似的效果? 首先,想一想,如果让你去实现上面的效果,你会怎么做呢? 这里我简单罗列一些可能的办法: 阴影 box-shadow 渐变 radial-gradient 缩放 transform: scale() 快速的一个一个过一下. 使用 box-sh

  • python opencv实现目标区域裁剪功能

    这个任务是自己在项目中数据处理的一部分内容,待处理的图片如下所示: 我需要将目标区域给裁剪出来,要不然在后期训练网络的时候整幅图像过大,且目标区域过小,得到结果不好,还会加剧计算量.在网上找了各个大佬的博客看,没找到合适的,便自己动手写了,顺便自己的小破站刚搭建起来,记录一下自己的思路. 思路 去寻找目标区域的最左边,最右边,最上面和最下面的像素点,取到坐标信息以后用CV2的裁剪一下就可以实现了. #难点 数据总共是11952张图片,每张图片是1024*768大小的,依次去遍历的话担心太费时间了

  • Android实现图片区域裁剪功能

    今天做的就是关于实现图片的区域裁剪功能.由于项目功能的需要笔者需要实现PDF文档的阅读,并且就某个页面实现"图片"裁剪(一个页面理解为一张图片).笔者对着方面是一点儿也不熟悉,因此就得上网查资料了.之后笔者找到了Android可以通过调用系统相册.拍照实现图片的裁剪.缩放功能. 这一过程就像是在某个应用中上传头像,并对头像进行调整.现做一个记录与分享. 首先我们还是来看看实际的效果图吧! 一开始的界面: 接下来: 看看实际实现区域裁剪的效果吧?需要注意的是这是系统自带的功能来实现的.

  • iOS中实现动态区域裁剪图片功能实例

    前言 相信大家应该都有所体会,裁剪图片功能在很多上传图片的场景里都需要用到,一方面应用服务器可能对图片的尺寸大小有限制,因而希望上传的图片都是符合规定的,另一方面,用户可能希望只上传图片中的部分内容,突出图片中关键的信息.而为了满足用户多种多样的裁剪需求,就需要裁剪图片时能支持由用户动态地改变裁剪范围.裁剪尺寸等. 动态裁剪图片的基本过程大致可以分为以下几步 显示图片与裁剪区域 支持移动和缩放图片 支持手势改变裁剪区域 进行图片裁剪并获得裁剪后的图片 显示图片与裁剪区域 显示图片 在裁剪图片之前

  • JS中利用localStorage防止页面动态添加数据刷新后数据丢失

    非常不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,use

  • 利用js给datalist或select动态添加option选项的方法

    有时需要从配置文件中读取信息,然后添加到用户的选择项中,比如select的option选项,下面针对此类情况做了一个实例 内容如下: <!DOCTYPE html> <html> <head> <title>鼠标点击时加载</title> <script type="text/javascript" src="jquery-1.8.3.js"></script> </head&

  • Vue.js如何利用v-for循环生成动态标签

    目录 前言 一.当写入数据为数组时 二.当写入数据为对象时 三.作用于标签属性和事件 总结 前言 使用v-for可以用于动态生成html标签.其实就是对于vue中属性是对象或者数组进行遍历生成新的标签. v-for就像java中的for循环一样,迭代需要的所有元素. 大多数情况是以一个数组嵌套多个对象的数据进行v-for循环 一.当写入数据为数组时 如果循环遍历得到的value值是一个对象,需要使用里面的值可以用 对象名.key 来调用key对应的value值 v-for写入数组的格式: arr

  • 如何利用Vue3管理系统实现动态路由和动态侧边菜单栏

    目录 前言 动态路由 动态侧边菜单栏 总结 前言 在做Vue管理系统的时候,都会遇到的一个需求:每个用户的权限是不一样的,那么他可以访问的页面(路由),可以操作的菜单选项是不一样的,如果由后端控制,我们前端需要去实现动态路由,动态渲染侧边菜单栏. 动态路由 在本示例管理系统中,由于每个用户的权限不一样,拥有的可以访问的路由页面也不一样,用户能访问的路由页面都是后端根据权限动态配置的 我们前端需要根据后端接口返回的路由表去动态增删路由,从而生成这个用户所拥有的路由. 重点:实现动态路由api ro

  • JS利用window.print()实现网页打印功能

    目录 前言 一.print()方法 二.打印样式 1.使用打印样式表 2.使用媒介查询 3.内联样式使用media属性 4.在css中使用@import引入打印样式表 三.打印指定区域部分内容 1.方法一 2.方法二 3.方法三 四.强制插入分页 五.设置打印布局(横向.纵向.边距) 六.去除浏览器默认页眉页脚 七.打印方法封装 前言 print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容,我们可以在MDN上查看到相关的简单介绍. 一.print()方法 print() 方法用于打

  • Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解

    前言 本文主要给大家介绍了关于Three.js利用orbit controls插件(轨道控制)控制模型交互动作的相关内容,这个效果相对于第八节的轨迹球插件使用上感觉要好,虽然轨迹球插件可以来回的滚动,但是容易分辨不清楚上下左右的关系,容易混乱,适合调试,而轨道控制插件orbit则适合客户使用,还不会产生混乱效果.下面讲一下使用. (1)首先引入插件,文件地址在官方案例的examples/js/controls/OrbitControls.js. (2)然后实例化函数,把相机和渲染器的dom传入,

随机推荐