每天一个小技巧:CSS clip-path 的妙用 Clip Path分类Clippy
CSS 的 clip-path 属性是 clip 属性的升级版,它们的作用都是对元素进行 “剪裁”,不同的是 clip
只能作用于 position
为 absolute
和 fixed
的元素且剪裁区域只能是正方形,而 clip-path
更加强大,可以以任意形状去裁剪元素,且对元素的定位方式没有要求。基于这样的特性,clip-path
常用于实现一些炫酷的动画效果。
比如:
视差广告效果:
实现请参考:CodePen
菜单栏弹出效果:
实现请参考:CodePen
Clip Path分类
clip-path
有几大类,分别为:
-
basic-shape
: 基本图形,包括inset()
、circle()
、ellipse()
、polygon()
-
clip-source
: 通过url()
方法引用一段 SVG 的<clipPath>
来作为剪裁路径 -
geometry-box
: 单独使用时会将指定框的边缘作为剪裁路径,或者配合basic-shape
使用,用于定义剪裁的参考框(Reference Box)(由于该属性浏览器支持度比较低,本文暂不讨论)
一、Basic Shape
1. Inset
inset()
用于定义一个插进的矩形,即被剪裁元素内部的一块矩形区域。
参数类型:
inset( <shape-arg>{1,4} [round <border-radius>]? )
其中 shape-arg
分别为矩形的上右下左顶点到被剪裁元素边缘的距离(和margin
、padding
参数类似),border-radius
为可选参数,用于定义 border 的圆角。
DEMO:
html:
<img class="img inset" src="http://source.unsplash.com/random/1000x1000" />
css:
.inset {
clip-path: inset(0);
&:active {
clip-path: inset(100px 200px 10% 20% round 20px);
}
}
2. Circle
circle()
用于定义一个圆。
参数类型:
circle( [<shape-radius>]? [at <position>]? )
其中 shape-radius
为圆形的半径,position
为圆心的位置。
如果 shape-radius
为百分比,则 100% 相当于:
sqrt(width^2+height^2)/sqrt(2)
width
、height
分别为被剪裁元素的宽高。
DEMO:
html:
<img class="img circle" src="http://source.unsplash.com/random/1000x1000" />
css:
.circle {
clip-path: circle(100px at center);
&:hover {
clip-path: circle(50% at center);
}
}
3. Ellipse
ellipse()
用于定义一个椭圆。
参数类型:
ellipse( [<shape-radius>{2}]? [at <position>]? )
其中 shape-radius
为椭圆x、y轴的半径,position
为椭圆中心的位置。
DEMO:
html:
<h2>Ellipse (click)</h2>
<div class="img-box">
<img class="img ellipse" src="http://source.unsplash.com/random/1000x1000" />
</div>
css:
.ellipse {
clip-path: ellipse(200px 500px at 50% 50%);
&:active {
clip-path: ellipse(500px 500px at 50% 50%);
}
}
4. Polygon
polygon()
用于定义一个多边形。
参数类型:
polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
其中 fill-rule
为填充规则,即通过一系列点去定义多边形的边界。
DEMO:
html:
<img class="img polygon" src="http://source.unsplash.com/random/1000x1000" />
css:
.polygon {
clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%);
&:active {
transform: rotate(720deg);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
}
二、Clip Source
即通过引用一个svg的 clipPath 元素来作为剪裁路径。比如,使用在 <clipPath>
中定义一个圆:
html:
<svg>
<defs>
<clipPath id="svgCircle">
<circle cx="500" cy="500" r="400" />
</clipPath>
</defs>
</svg>
<img class="img svg-circle" src="http://source.unsplash.com/random/1000x1000" />
css:
.svg-circle {
clip-path: url("#svgCircle");
}
效果:
Clippy
如果觉得自己去计算和绘制一个图形太麻烦,可以使用 clippy 这个在线 clip-path
绘制工具,里面包含了大部分常用的图形,也支持可视化绘制自定义图形。
Clippy:
每天一个小技巧(Tricks by Day),量变引起质变,希望你和我一起每天多学一点,让技术有趣一点。所有示例将会汇总到我的 tricks-by-day github 项目中,欢迎大家莅临指导。
- MYSQL5.6&5.7编译安装
- 架构高性能网站秘笈(三)——浏览器缓存
- 剑指 offer代码解析——面试题39判断平衡二叉树(高效方法)
- 跟着柴毛毛学Spring(4)——面向切面编程![这里写图片描述](http://img.blog.csdn.net/20171031111402095)
- MYSQL数据闪回方式
- 剑指 offer代码解析——面试题39判断平衡二叉树
- 跟着柴毛毛学Spring(3)——简化Bean的配置
- 剑指 offer代码解析——面试题39二叉树的深度
- 跟着柴毛毛学Spring(2)——Bean的配置
- C++ 使用STL string 实现的split,trim,replace-修订
- 跟着柴毛毛学Spring(1)——纵观Spring
- MYSQL常用SQL汇总
- Linux 下设置SVN DIFF
- 剑指 offer代码解析——面试题38数字在排序数组中出现的次数
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- FTP文件管理项目(本地云)项目日报(六)
- Transformers Assemble(PART I)
- FTP文件管理项目(本地云)项目日报(五)
- 几个Python“小伎俩”
- FTP文件管理项目(本地云)项目日报(四)
- BERT源码分析(PART I)
- FTP文件管理项目(本地云)项目日报(二)
- FTP文件管理项目(本地云)项目日报(一)
- 【奇技淫巧】-- 朋友圈(并查集)
- 【奇技淫巧】-- 岛屿的最大面积
- LeetCode精选好题(三)
- 【LeetCode两题选手】算法类题目(7.29)
- 【LeetCode两题选手】算法类题目(7.27)
- 【奇技淫巧】-- 走地图的不同路径
- 【奇技淫巧】-- 搜索旋转数组