css能不能实现剪切蒙版,CSS中图形剪切、遮罩功能-及使用说明
Firefox 54 发布后,本来已经很酷的 CSS 属性,又增添新军:clip-path(裁减路径)。
clip-path 属性能让你裁剪(剪掉)一个元素中的指定区域。过去,你只能用 SVG 裁切元素。
但在 Firefox 54 推出后,你将可绘制出各式各样的 CSS 图形:insets, circles, ellipses 和 polygons!
注意:这篇文章包含许多演示,需要支持clip-path和mask。 为了能够在本文中看到每个演示,并与之交互,您需要使用 Firefox 54 或更高版本。
基本使用
考虑到 clip-path 不接受 “img” 作为一个输入,而是作为 元素:
一件很酷的事情是,这些 元素能包含 SVG 动画:
但是,在新发布的 Firefox 版本中,我们也将拥有CSS形状函数。 这允许我们在样式表中定义形状而无需 SVG 。 我们可以使用的形状函数是:含 circle(圆形),ellipse(椭圆形),inset(嵌入) 和 polygon(多边形)。你可以看下面这个例子:
See the Pen oWJBwW by ladybenko (@ladybenko) on CodePen.0
不仅如此,我们还可以使用CSS为它们制作动画。 唯一的限制是我们不能“混合”函数形状(比如,从 circle 变形 inset ),并且当给一个多边形增加动画的时候,多边形在整个动画期间必须保持相同数量的顶点。
这是一个使用 circle (圆形)制作的简单动画:
下面是另一个使用 polygon (多边形)的动画。注意:尽管我们受限于多边形顶点数量不能变化,我们仍然可以通过重复的值来“合并”它们,这样就能够创建出能够变化边数的多边形动画假象了。
请注意,clip-path 还为页面布局开创新的可能性。 下面的演示中,在多列文章中剪辑图像,使文章读起来更有趣:
See the Pen Layout example by ladybenko (@ladybenko) on CodePen.0
使用JavaScript来进行调查
剪切让我们可以尝试许多新奇的作法。 在下面的例子中,clip-path 被用来隔离网站的元素 – 在这种情况下,可以用来模拟引导效果:
它是通过 JavaScript 在运行中获取元素的尺寸来完成的,并计算相对于参考容器的距离,然后使用该距离更新到 clip-path 属性所采用的 inset 形状上。
我们现在也可以根据用户输入的内容来动态调整剪切的区块,就像在这个例子中,通过鼠标控制的“潜望镜”效果:
该用 clip-path 还是 mask ?
有一个类似的CSS属性,mask(遮罩) ,但它不同于 clip-path 。 根据你的具体使用情况决定应该选择哪一个。 另外请注意浏览器的兼容性,目前 Firefox 是唯一完全支持所有 mask 功能的浏览器,因此你需要在 Firefox 54 运行 Codepen 上的演示程序进行交互。
mask(遮罩)可以在SVG中使用 图像 或 元素。 而 clip-path 则是使用 SVG 路径或 CSS 形状。
mask(遮罩)可以改变遮罩的元素的外观。 例如,下面是一个用线性渐变填充的圆形遮罩:
请记住,即使没有alpha通道(即透明度),也可以通过调整 mask-mode 来 使用位图图像:
遮罩的一个重要概念是修改图像的像素,改变他们的值 – 让他们中的一些区域变成完全透明。
另一方面,剪裁则是直接「修剪」元素,包括相交的那一部分。 看看 下面的演示,显示两个相同的图片被遮罩,并用相同的十字形状剪辑。尝试将鼠标移到在图片上,看看会发生什么。您会注意到,在遮罩图像中,相交区域还包含遮罩部分。 在裁剪的图像中,相交区域只是元件的可见部分(即十字形状)。
遮罩比剪切更好用吗?还是剪切更强大呢?皆否。两者之间没有孰优孰劣,只是各有不同用途。
希望本文激起了您对 clip-path 的兴趣。您可在 Firefox 54 尝试这项CSS 新属性!
css能不能实现剪切蒙版,CSS中图形剪切、遮罩功能-及使用说明相关推荐
- 【转】CSS和SVG中的剪切——clip-path属性和clipPath元素
本文由大漠根据SaraSoueidan的<Clipping in CSS and SVG – The clip-path Property and <clipPath> Elemen ...
- CSS制作类似 Photoshop 模糊蒙版效果
CSS制作类似 Photoshop 模糊蒙版效果 引言 不兼容IE的纯css实现代码 实现代码 实现原理 兼容IE10,IE11的模糊蒙版效果,使用canvas 实现代码 实现原理 引言 为了使一个在 ...
- vue动态切换css文件_如何在vue组件中动态的引入css文件?
问题描述 如标签描述的不准确,请见新直能分支调二浏页器朋代说谅 我的需求是开的接都上的和,近很触是没他电同近很触是没发多套皮肤,打包的时候只加载其中某一种的皮肤(不需要动态换肤),因为css文件过大, ...
- css 动画使用_如何在CSS中使用动画
css 动画使用 使用CSS动画 (Using CSS Animations) CSS animations add beauty to the webpages and make transitio ...
- HTML中放置CSS的三种方式和CSS选择器
(一)在HTML中使用CSS样式的方式一般有三种: 1 内联引用 2 内部引用 3 外部引用. 第一种:内联引用(也叫行内引用) 就是把CSS样式直接作用在HTML标签中. <p style=& ...
- 谷歌浏览器修改CSS和js后同步保存到文件中 (译)
本文标题:谷歌浏览器修改CSS和js后同步保存到文件中. 文本作者:魔芋铃. 英文原文:http://www.stephensaw.me/google-chrome-devtools-source-m ...
- css轮播箭头怎么隐藏,CSS——轮播图中的箭头
注意事项: 1.定位中left权重比right高,top权重比bottom高 2.两个span标签嵌套在一个盒子中,将来显示隐藏只需要控制父盒子就行了 .box { width: 400px; hei ...
- html5 css 响应式_在HTML5 / CSS3中编写响应式简历
本文是我们的" Web响应式设计系列"的一部分,该系列由工具,资源和教程组成,可帮助您为所有平台的用户创建网站. 单击此处查看同一系列的更多文章. 业务部分的几乎每个人都在某个时间 ...
- 两端文字对齐css,css两端对齐怎么设置,css中文本的对齐有哪些
css两端对齐怎么设置,css中文本的对齐有哪些 内容导读:除了css两端对齐,本文还介绍了主要的css中文本的对齐有哪些.可以看到,常见的文本对齐方式是靠左.居中以及靠右,相对来说css两端对齐用得 ...
- html中高度自动调整,css高度自适应如何实现?css高度根据内容自适应的简单方法...
在进行网页开发时,可能会遇到这样的情况,网页中的内容会超出你原先设置的高度或者宽度,这时就需要实现高度自适应或者宽度自适应,下面这篇文章将给大家来介绍关于css高度自适应. PS:css宽度自适应的介 ...
最新文章
- jQuery.fn是什么意思?
- 什么 Leader 值得追随?
- 【C语言】C语言常量和变量
- mysql源代码安装_mysql源代码安装
- pythonfor循环语句例子_Python for循环学习总结
- rest-framework框架的基本组件
- vs2017结合qt开发,vs报错找不到库(解决方案)
- 机器学习中的 Shapley 值怎么理解?
- 贝塞尔曲线(Bezier Curve)
- 大学计算机基础教程第11章计算机网络与应用总结
- 以实例说明,网吧组网方案详解!(转)
- YALMIP建模+CPLEX求解,让优化问题更简单
- 【微信公众号】6、SpringBoot整合WxJava创建自定义菜单
- 数据库操作--已更新或删除的行值要么不能使该行成为唯一行,要么改变了多个行
- LLDB breakpoint syntax
- 机器学习笔记 十五:随机森林(Random Forest)评估机器学习模型的特征重要性
- Windows自带的计算器
- uni-app使用iconfont
- Spark机器学习管道 - Pipeline
- 改变世界的25本科普书