一基本概念
刷新 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 参数的顺序为 toprightbottonleft
所有主流浏览器都支持 clip 属性, 在雪碧图 ( CSS Sprite ) 的展示仍然有它的用武之地, 但是由于 clip 属性的局限性, clip 已经被 clip-path 代替平常开发中我们可以使用 borderborder-radius 等属性制作三角形圆或圆角矩形等简单图案, clip-path 为我们提供了更多的可能, 结合 SVG 的 pathanimate 等标签可以制作更多的有趣的图案
二用法实践
clip-path 属性可以裁剪出很多图形, circleellipsepolygoninset, 同时也可以使用动画和 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 的语法 ChromeSafari 和 Opera 需要使用 -webkit- 的前缀兼容此属性不支持外部的 SVG 形状更多兼容信息可以点击这里查看 clip-path 浏览器兼容情况
三经验总结
使用 URL(#path) 内联 SVG 的方式, 我们可以很轻易的裁剪出复杂的形状, 也能够包含一些形象生动的动画效果, 比如在扑克游戏出牌下注的倒计时上添加扇形遮罩, 或是在矩形边缘添加倒计时进度, 加载中的动画等等, 都能够使用 clip-path 属性巧妙的实现, 同时在使用 clip-path 属性可以裁剪图形时可以灵活的使用相对单位
四参考链接
- clip-path
- species-in-pieces
CSS3/SVG clip-path 路径剪裁遮罩属性简介
来源: https://juejin.im/post/5a975c14f265da4e9c635ea4