利用 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 #fff
到box-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 实现动态区域裁剪,希望大家能够掌握。
最后
好了,本文到此结束,希望本文对你有所帮助
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
利用 clip-path 实现动态区域裁剪的更多相关文章
- 根据自定义区域裁剪ArcGIS切片地图服务
切片地图服务是访问地图最快捷的服务方式.假如要根据地理区域对切图进行访问控制,往往只能针对不同地理区域制作相应的地图,并发布为切片地图服务.而一般在切图的时候又是按全区域实施的,所以给切片管理者造成不 ...
- [.net 面向对象程序设计进阶] (20) 反射(Reflection)(上)利用反射技术实现动态编程
[.net 面向对象程序设计进阶] (20) 反射(Reflection)(上)利用反射技术实现动态编程 本节导读:本节主要介绍什么是.NET反射特性,.NET反射能为我们做些什么,最后介绍几种常用的 ...
- CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板。
CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板. CLIP PATH (MASK) GENERATO ...
- java多图片上传--前端实现预览--图片压缩 、图片缩放,区域裁剪,水印,旋转,保持比例。
java多图片上传--前端实现预览 前端代码: https://pan.baidu.com/s/1cqKbmjBSXOhFX4HR1XGkyQ 解压后: java后台: <!--文件上传--&g ...
- 利用反射生成JDK动态代理
利用反射生成JDK动态代理 在Java的java.lang.reflect包下提供了一个Proxy类和一个InvocationHandler接口,通过使用这个类和接口可以生成JDK动态代理类和动态代理 ...
- 静态代理和利用反射形成的动态代理(JDK动态代理)
代理模式 代理模式的定义:为其他对象提供一种代理以控制对这个对象的访问.在某些情况下,一个对象不适合或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用. 静态代理 1.新建 ...
- 利用Clip制作打洞效果
起因 如上篇博文所说,连线原型需要在中间文字上下各留15像素的空白.设计师完成原型之后,问我有没有办法实现,我说,我能想到两种实现方式.其中一种就是上篇博文所说的OpacityMask.第二种就是使用 ...
- 利用CSS3 animation绘制动态卡通人物,无需使用JS代码
此外博主原创,转载请注明出处:谢谢~ 效果图: 其中云.风车.尾巴是动态的: 以下是代码: <!DOCTYPE html> <html lang="en"> ...
- 如何利用Power BI 制作动态搜索界面
最近Power BI有了最新更新,想着利用 Power BI 工具制造一个动态的搜索界面,比如动态切换搜索引擎,分别从百度.360.搜狗等搜索苹果最新新闻.通过一番测试,最终实现了相关功能. 数据加载 ...
随机推荐
- Duboo整合SpringBoot超级详细例子(附源码)
dubbo3.0整合SpringBoot例子 dubbo新版本(3.0以上)在相对于 dubbo 旧版本(2.5.2.6.2.7),有很多的不相同的地方. 官方文档也说了新版本的特性: https:/ ...
- [luogu4484]最长上升子序列
标算是状压dp+打表,前者时间复杂度为$o(n^{2}2^{n})$,并通过打表做到$o(1)$ 参考loj2265中关于杨表的相关知识,不难发现答案即$\frac{\sum_{a\vdash n}a ...
- [loj3503]滚榜
一个小问题:题意中关于$b_{i}$的顺序只需要单调不降即可,相同时可任意选择 考虑$i$优于$j$的条件,即$val_{i}\ge val_{j}+[i>j]$,并记$del_{i,j}=\m ...
- MemoryMappedFile 在IIS与程序跨程序交互数据的权限问题
使用IIS 与程序交互时,发布到IIS上获取不到数据提供方的数据(VSF5运行可以获取到数据),MemoryMappefFile基本使用不做介绍 数据方 static void Main(string ...
- 柯基数据通过Rainbond完成云原生改造,实现离线持续交付客户
1.关于柯基数据 南京柯基数据科技有限公司成立于2015年,提供一站式全生命周期知识图谱构建和运维.智能应用服务,致力于"链接海量数据,从大数据中挖掘智慧".帮助企业运用知识 ...
- 『学了就忘』Linux权限管理 — 55、文件特殊权限
目录 1.文件特殊权限说明 2.设置SetUID 3.检测SetUID的脚本 4.设置SetGID (1)针对文件的作用 (2)针对目录的作用 5.Sticky BIT 6.设定文件特殊权限 7.文件 ...
- 「日志」Navicat统计的行数竟然和表实际行数不一致
背景 近期为了保障线上数据库的稳定性,我决定针对一些大表的历史数据有计划地进行备份迁移,但是呢,发现一个奇特的现象,Navicat统计行数和表自身count统计数竟然不一致!?0.0 Navicat ...
- [NOIP2017 提高组] 宝藏
考虑到这种对于某种操作顺序有一个权值. 且这个权值有一个\(O(n)\)或者更好的复杂度求出. 求最值. 那可以用模拟退火. #include<iostream> #include< ...
- 洛谷 P6776 - [NOI2020] 超现实树(找性质,神仙题)
洛谷题面传送门 nb tea 一道! 首先考虑怎样入手分析这个看似非常不可做的问题.首先题目涉及高度无穷的树,根本枚举不了.不过我们冷静一下就会发现,如果我们记 \(mx=\max\limits_{i ...
- Linux-各种姿势(less\vi等)打开各种类型的文件(txt/csv/xlsx等)出现不能打开(全乱码、部分乱码、二进制文件等)的问题
(一)linux各种中文乱码解决办法整理 远程登录服务器用vim在终端下编辑查看文件经常会遇见各种中文乱码问题. 做如下设置可基本解决vim中文乱码问题,首先查看系统对中文的支持locale -a | ...