CSS3 clip-path 用法介绍详解


Posted in HTML / CSS onMarch 01, 2018

一、基本概念

刷新 QQ 空间动态时,发现一则广告,随着用户上下滑动动态列表,就会自动切换广告图片,这样的效果对移动端本就不大的屏幕来说,无疑是很精妙的考虑,这样的效果是怎么实现的呢?

接下来就说说这个效果的具体实现思路:

  1. 将两张图片通过定位,相对于图片容器堆叠在一起;
  2. 在图片容器的左上角或右下角选取一个圆心,绘制一个圆,不断加大圆的半径来显示第二张图片;
  3. 上划下拉时,根据滑动速度动态改变圆的半径;
  4. 当图片容器距屏幕顶部或底部的距离为 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 等标签可以制作更多的有趣的图案。

二、用法实践

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%);

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 属性可以裁剪图形时可以灵活的使用相对单位。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
利用CSS3实现动态的二级三级菜单效果实例源码
Jan 04 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
Feb 07 HTML / CSS
html5实现微信打飞机游戏
Mar 27 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
Apr 24 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
Apr 24 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
May 26 HTML / CSS
CSS完成视差滚动效果
Apr 27 HTML / CSS
HTML实现仿Windows桌面主题特效的实现
Jun 28 HTML / CSS
CSS3混合模式mix-blend-mode/background-blend-mode简介
Mar 15 #HTML / CSS
CSS3截取字符串实例代码【推荐】
Jun 07 #HTML / CSS
CSS3地图动态实例代码(圆圈向外扩散)
Jun 15 #HTML / CSS
css3中的calc函数浅析
Jul 10 #HTML / CSS
详解css3 object-fit属性
Jul 27 #HTML / CSS
CSS3对图片照片进行边缘模糊处理的实现
Aug 08 #HTML / CSS
详解CSS3伸缩布局盒模型Flex布局
Aug 20 #HTML / CSS
You might like
php cache类代码(php数据缓存类)
2010/04/15 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
详解Yii实现分页的两种方法
2017/01/14 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
2019/08/04 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
详解python中的json的基本使用方法
2016/12/21 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
python与pycharm有何区别
2020/07/01 Python
python利用 keyboard 库记录键盘事件
2020/10/16 Python
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
美国轻奢时尚购物网站:REVOLVE(支持中文)
2020/07/18 全球购物
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
计算机专业个人求职自荐信
2013/09/21 职场文书
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
医生辞职信范文
2015/03/02 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
小学生六年级作文之关于感恩
2019/08/16 职场文书