CSS3中的clip-path使用攻略


Posted in HTML / CSS onAugust 03, 2015

根据她的以往经验,这个网站的HTML和CSS是完全在她的能力范围以内,于是我帮助她完成了这个效果。显示nav被裁减的效果是一个不简单的任务,我看到图片的第一反应是创建一个相匹配的背景被部分裁剪的图像,然后把它设置为一个after元素。问题是,至少要解决响应式问题,并且响应式并不完全可控的。
了解CSS属性:clip-path

clip-path 是工作草案的一部分,它是一个通过屏蔽和裁减来隐藏元素的一部分的工具。尽管clip-path没有被主流的浏览器支持(包括IE和Firefox),但在webkit浏览器中,它仍然是一个实现时尚效果的小工具。

注意,在现代浏览器中需要使用-webkit-前缀。

clip-path 简单的工作原理是提供一系列的X和Y值来创建路径。当使用这些值创建一条完整路径时,就会把图像按照路径内部的尺寸进行裁剪。

利用clip-path,我们可以创建圆形、椭圆和多边形等不同的形状,创造力是唯一的限制。
一个简单的三角形裁减
CSS3中的clip-path使用攻略

View the code on codepen
对元素简单地运用clip-path就能实现上面的效果:

CSS Code复制内容到剪贴板
  1. .clipClass {   
  2.   -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);   
  3. }  

逐步分析

很像定位属性,我们需要考虑X值和Y值。X:0和Y:0表示从元素的左上角开始,并从左上角开始移动。X:100%指的是元素右边,Y:100%指的是元素底部。
对于上面创建的路径,实际是创建了如下的点:

CSS Code复制内容到剪贴板
  1. x: 0, y:100%   
  2. x: 50%, y: 0   
  3. x: 100%, y: 100%  

这个简单路径开始于左下角,水平移动50%,并到达顶部位置,然后又水平移动到100%的位置,垂直向下回到底部,到达第三个坐标点。三角形就出来了。
形状

在上面的示例中,我们使用polygon来创建一个图形,并通过多对用逗号(,)分开的X值和Y值定义了一个路径。然后,我们可以通过取不同的值来创建不同的图形。

CSS3中的clip-path使用攻略

View the code on codepen
为了创建圆形,需要给circle传入三个值:圆心的坐标(X值和Y值)以及半径。当定义圆的半径时,我们可以用at关键字来定义圆心坐标。

CSS Code复制内容到剪贴板
  1. .clipClass {   
  2.   -webkit-clip-path: circle(50% at 50% 50%);   
  3. }  

椭圆
CSS3中的clip-path使用攻略

View this code on codepen
很多时候,你不需要一个简单的圆,而是一个椭圆。

为了实现椭圆,需要给ellipse提供4个值:椭圆的x轴半径、y轴半径、定位椭圆位置的x坐标和y坐标,后面两个值用at关键字和前面两个值分开。

CSS Code复制内容到剪贴板
  1. .clipClass {   
  2.   -webkit-clip-path: ellipse(30% 20% at 50% 50%);   
  3. }  

插图

(在老版本的chrome中有错误)
CSS3中的clip-path使用攻略

View the code on codepen
因为多边形边缘锐利,所以它可能不是你想要的东西,你想创建的是圆角矩形,所以我们来看看Inset的值。Inset使用四个值(对应“上 右 下 左”的顺序)来设置圆角半径。

CSS Code复制内容到剪贴板
  1. .clipClass {   
  2.   -webkit-clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);   
  3. }  

上面的各个值分别对应为:

CSS Code复制内容到剪贴板
  1. inset(<top> <rightright> <bottombottom> <left> round <top-radius> <rightright-radius> <bottombottom-radius> <left-radius>)  

其简写形式:

CSS Code复制内容到剪贴板
  1. .clipClass {   
  2.   -webkit-clip-path: inset(25% 0 round 0 25%);   
  3. }  

快速参考

CSS Code复制内容到剪贴板
  1. Circle: circle(radius at x-axis y-axis)   
  2. Ellipse: ellipse(x-rad y-rad at x-axis y-axis)   
  3. Polygon: polygon(x-axis y-axis, x-axis y-axis, … )   
  4. Inset: inset(top rightright bottombottom left round top-radius rightright-radius bottombottom-radius left-radius)  

创建形状

正如你看到的,原型和圆角图形被少数几个值限制了,因而Polygons是创建复杂图形的最好选择。Polygons能定义多组点,允许我们用各种方式去裁图形。
Comic Textbox
CSS3中的clip-path使用攻略

View the code on codepen

CSS Code复制内容到剪贴板
  1. .clipClass {   
  2.   -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);   
  3. }  

Star
CSS3中的clip-path使用攻略

View the code on codepen

CSS Code复制内容到剪贴板
  1. .clipClass {   
  2.   -webkit-clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0 38%, 37% 38%);   
  3. }  

动画

现在我们已经了解了各种图形和怎么创建它们,那怎么利用这些图形创建我们想要的效果呢?
给形状应用一个hover,并用过渡属性来创建平滑的效果。但是需要记住,我们创建的初始默认状态,必须同所有的hover状态都使用相同的坐标系。
View the code on codepen

CSS Code复制内容到剪贴板
  1. .animateClass {   
  2.   -webkit-clip-path: polygon(20% 0%, 0% 0%, 0% 50%, 0% 80%, 0% 100%, 50% 100%, 80% 100%, 100% 100%, 100% 50%, 100% 0, 80% 0, 50% 0);   
  3. }   
  4. .animateClass:hover {   
  5.   -webkit-clip-path: polygon(50% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);   
  6. }  
HTML / CSS 相关文章推荐
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 HTML / CSS
CSS3制作炫酷的自定义发光文字
Mar 28 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
Mar 01 HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 HTML / CSS
HTML5验证以及日期显示的实现详解
Jul 05 HTML / CSS
Html5 audio标签样式的修改
Jan 28 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
Jun 20 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
Aug 05 HTML / CSS
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
Apr 22 HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 #HTML / CSS
CSS3中的content属性使用示例
Jul 20 #HTML / CSS
详解CSS3中border-image的使用
Jul 18 #HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 #HTML / CSS
CSS3制作Dropdown下拉菜单的方法
Jul 18 #HTML / CSS
使用CSS3来绘制一个月食图案
Jul 18 #HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 #HTML / CSS
You might like
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
用文本作数据处理
2006/10/09 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
PHP函数积累总结
2019/03/19 PHP
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
封装好的一个万能检测表单的方法
2015/01/21 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
JS实现焦点图轮播效果的方法详解
2016/12/19 Javascript
node.js操作mongodb简单示例分享
2017/05/25 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
Python实现二分法算法实例
2015/02/02 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
护士自荐信范文
2013/12/15 职场文书
乐观大学生的自我评价
2014/01/10 职场文书
实习单位接收函
2014/01/11 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
擅自离岗检讨书
2014/09/12 职场文书
文艺委员竞选稿
2015/11/19 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python