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实现 基础算法 百元买百鸡
public class 百元买百鸡 { public static void main(String[] args) { //母鸡 for (int i = 1; i < 33; i++) { ...
- Java实现选择问题
选择问题是求一个n个数列表的第k个最小元素的问题. 那么如何寻找n个元素中第k个最小元素呢? package com.liuzhen.chapter4; public class SelectProb ...
- Linux 文件特殊权限-SetUID
SetUID非常类似于Windows中以管理员身份来运行文件,针对的是可执行文件,而且命令执行者要拥有对这个文件的执行权限,只在文件执行的过程中变换身份,最常见的passwd命令就具有SetUID权限 ...
- MySQL数据库离线包安装与注册
本文主要介绍了MySQL数据库的离线安装和将MySQL服务注册为Windows应用服务的主要步骤. 1.下在安装程序包 MySQL Community Server 5.6.15 官方下载地址http ...
- Nice Jquery Validator 【从 jQuery Validation 迁移】
1. 初始化表单验证 .validate VS .validator jquery-validation : $("#myform").validate(options) nice ...
- make & make install(make altinstall) 因动态库gcc版本问题
cc1: error: unrecognized command line option “-flot” 解决方式是:找到 configure之后的Makefile, 删除 -flot 原因是gcc ...
- @loj - 2987@ 「CTSC2016」时空旅行
目录 @description@ @solution@ @accepted code@ @details@ @description@ 2045 年,人类的技术突飞猛进,已经找到了进行时空旅行的方法. ...
- (八)MySQL事务、视图、变量、存储过程、函数、流程控制结构
补充:增删查改语句在数据库中基本通用,但这篇博客的内容基本是MySQL区别于其它数据库管理系统的知识,也要认真学习. 一.事务 1.含义:在MySQL中,可以通过创建事务来解决一些问题. 2.语法: ...
- Docker学习 ,超全文档!
我们的口号是:再小的帆也能远航,人生不设限!! 一.学习规划: Docker概述 Docker安装 Docker命令 Docker镜像 镜像命令 容器命令 操作命令 容器数据卷 Doc ...
- SpringBoot 启动配置原理
几个重要的事件回调机制 ApplicationContextInitializer SpringApplicationRunListener ApplicationRunner CommandLine ...