CSS3 clip-path 用法介绍
一、基本概念
刷新 QQ 空间动态时,发现一则广告,随着用户上下滑动动态列表,就会自动切换广告图片,这样的效果对移动端本就不大的屏幕来说,无疑是很精妙的考虑,这样的效果是怎么实现的呢?
你可以点击这里:QQ空间广告示意demo
接下来就说说这个效果的具体实现思路:
- 将两张图片通过定位,相对于图片容器堆叠在一起;
- 在图片容器的左上角或右下角选取一个圆心,绘制一个圆,不断加大圆的半径来显示第二张图片;
- 上划下拉时,根据滑动速度动态改变圆的半径;
- 当图片容器距屏幕顶部或底部的距离为 0 时,则相应的改变图片堆叠顺序及圆心位置。
在图片上绘制圆,为什么就能显示出第二张图片呢?说到这里,就不得不说一下咱们今天的主角 clip-path,引用 MDN 上的描述:
clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径,或者作为一个形状例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。
clip-path 的含义就是裁剪路径,通过指定的闭合路径或者形状,甚至是 SVG 中 clipPath 标签定义的形状,裁剪出部分需要保留的区域,这样网页中的布局实现可以是多种多样的。
在 clip-path 出现之前,CSS2.1 中的 clip 属性也有裁剪的效果,但是它只支持矩形,而且只对 position:absolute 或者 position:fixed 的元素生效,使用方式如下:
clip: rect(60px, 60px, 60px, 60px); // 标准写法
clip: rect(60px 60px 60px 60px); // 兼容 ie 及 火狐浏览器
注意: rect 参数的顺序为 top、right、botton、left
所有主流浏览器都支持 clip 属性,在雪碧图( CSS Sprite )的展示仍然有它的用武之地,但是由于 clip 属性的局限性, clip 已经被 clip-path 代替。平常开发中我们可以使用 border、border-radius 等属性制作三角形、圆或圆角矩形等简单图案,clip-path 为我们提供了更多的可能,结合 SVG 的 path、animate 等标签可以制作更多的有趣的图案。
设计坞https://www.wode007.com/sites/73738.html
二、用法实践
clip-path 属性可以裁剪出很多图形,circle、ellipse、polygon、inset,同时也可以使用动画和 SVG 的 clipPath 标签。
- 圆 circle
clip-path: circle(25% at 50% 50%);
- 椭圆 ellipse
clip-path: ellipse(25% 25% at 50% 50%);
- inset
clip-path: inset(35% 35% 35% 35% round 0 70% 0 70%);
- 多边形 polygon
clip-path: polygon(50% 0, 25% 50% ,75% 50%);
你可以点击这里:clip-path示意demo
- url
<section class="container">
<img src="img01.jpg" class="contract">
<img src="img02.jpg">
</section>
<svg height="0" width="0">
<clipPath id="clip02">
<circle cx="400" cy="210" r="0">
<animate
attributeType="CSS"
attributeName="r"
values="0;480;0"
dur="9s"
repeatCount="2"
/>
</circle>
</clipPath>
</svg>
.contract {
clip-path: url(#clip02);
z-index:1;
}
值得说明的是使用 SVG 的 clipPath 标签可以包裹 animate,其中 animate 标签的 attributeName 是指设置圆的半径,values 可以设置动画的帧,可以有多个值用分号分割,dur 是指动画的持续时间,repeatCount 是指动画的次数。
兼容性
目前 IE 和 Edge 都不支持这个属性。Firefox 仅部分支持 clip-path,部分支持是指只支持形状和 URL(#path) 内联SVG的语法。Chrome、Safari 和 Opera 需要使用 -webkit- 的前缀兼容此属性。不支持外部的 SVG 形状。更多兼容信息可以点击这里查看 clip-path 浏览器兼容情况。
三、经验总结
使用 URL(#path) 内联SVG 的方式,我们可以很轻易的裁剪出复杂的形状,也能够包含一些形象生动的动画效果,比如在扑克游戏出牌下注的倒计时上添加扇形遮罩,或是在矩形边缘添加倒计时进度,加载中的动画等等,都能够使用clip-path 属性巧妙的实现,同时在使用 clip-path 属性可以裁剪图形时可以灵活的使用相对单位。
CSS3 clip-path 用法介绍的更多相关文章
- css基础之 font的简写规则 以及 自定义 CSS3 @font-face详细用法
Part 1 font简写 CSS的命名规则是用英文字母 数字 和下划线(一般用小写)来命名.简写css font的好处有三:一是写起来方便(就像键盘快捷键):二是简化代码:三是帮助你熟悉和深刻理解c ...
- pm2常用的命令用法介绍
pm2 是一个带有负载均衡功能的Node应用的进程管理器.当你要把你的独立代码利用全部的服务器上的所有CPU,并保证进程永远都活着,0秒的重载, PM2是完美的,下面我们来看pm2常用的命令用法介绍吧 ...
- MyEclipse相关用法介绍
MyEclipse相关用法介绍 ================================================================================ 编辑: ...
- 一个由正则表达式引发的血案 vs2017使用rdlc实现批量打印 vs2017使用rdlc [asp.net core 源码分析] 01 - Session SignalR sql for xml path用法 MemCahe C# 操作Excel图形——绘制、读取、隐藏、删除图形 IOC,DIP,DI,IoC容器
1. 血案由来 近期我在为Lazada卖家中心做一个自助注册的项目,其中的shop name校验规则较为复杂,要求:1. 英文字母大小写2. 数字3. 越南文4. 一些特殊字符,如“&”,“- ...
- 好压(HaoZip)的命令行模式用法介绍
好压压缩软件,又叫“2345好压”,是一款国产的优秀压缩软件,目前是免费的,据官网介绍,该软件永久免费.官网地址:http://haozip.2345.com/ 本文主要对该软件的命令行模式用法进行介 ...
- sql事务(Transaction)用法介绍及回滚实例
sql事务(Transaction)用法介绍及回滚实例 事务(Transaction)是并发控制的单位,是用户定义的一个操作序列.这些操作要么都做,要么都不做,是一个不可分割的工作单位.通过事务, S ...
- CSS3的@keyframes用法详解:
CSS3的@keyframes用法详解:此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识:keyframes ...
- STL vector用法介绍
STL vector用法介绍 介绍 这篇文章的目的是为了介绍std::vector,如何恰当地使用它们的成员函数等操作.本文中还讨论了条件函数和函数指针在迭代算法中使用,如在remove_if()和f ...
- 怎么通过activity里面的一个按钮跳转到另一个fragment(android FragmentTransaction.replace的用法介绍)
即:android FragmentTransaction.replace的用法介绍 Fragment的生命周期和它的宿主Activity密切相关,几乎和宿主Activity的生命周期一致,他们之间最 ...
- CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板。
CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板. CLIP PATH (MASK) GENERATO ...
随机推荐
- Java实现回文判断
1 问题描述 给定一个字符串,如何判断这个字符串是否是回文串? 所谓回文串,是指正读和反读都一样的字符串,如madam.我爱我等. 2 解决方案 解决上述问题,有两种方法可供参考: (1)从字符串两头 ...
- java实现购物券消费方案
公司发了某商店的购物券1000元,限定只能购买店中的m种商品.每种商品的价格分别为m1,m2,-,要求程序列出所有的正好能消费完该购物券的不同购物方法. 程序输入: 第一行是一个整数m,代表可购买的商 ...
- java实现不连续处断开
不连续处断开 下列代码运行结果为: 12345 23456 89 23456789 即把一个串从数字不连续的位置断开.试完善之. String s = "123452345689234567 ...
- https://www.cnblogs.com/mrchige/p/6409444.html
https://www.cnblogs.com/mrchige/p/6409444.html http://c.biancheng.net/view/2172.html https://www.cnb ...
- Tomcat的8080端口被占用无法启动Tomcat怎么办?
一招解决Tomcat的8080端口被占用 打开tomcat的bin目录在,找到startup.bat,用记事本编辑startup.bat,在第一行加入 set JAVA_HOME=C:\Program ...
- tensorflow2.0学习笔记第二章第一节
2.1预备知识 # 条件判断tf.where(条件语句,真返回A,假返回B) import tensorflow as tf a = tf.constant([1,2,3,1,1]) b = tf.c ...
- MySQL索引实践
数据库索引本质上是一种数据结构(存储结构+算法),目的是为了加快数据检索速度. 1.索引的类型(待完善) 主键索引:给表设置主键,这个表就拥有主键索引. 唯一索引:unique 普通索引:增加某个字段 ...
- Java—JDBC向mysql数据库中给某个表添加数据时,会遇到的问题,如下
解析(jar包该放在那里,以及其它的操作): 把jar包(驱动)添加到自己的项目中,最好新建一个文件夹,再把jar包(驱动包)添加到这个所新建的文件中 1.先建好自己的项目,再新建一个文件夹,如下: ...
- CSS3如何实现div闪烁效果
效果: Html: <h1 class="blink">花花世界</h1> Css: @keyframes fade { from { opacity: 1 ...
- 如何在微信小程序中使用阿里字体图标
第一步:下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标. 如这里需要一个购物车的图标,流程为: 搜索“购物车”图标 ---> 点击“添加入库” ...