一、基本概念

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

你可以点击这里:QQ空间广告示意demo

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

  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 等标签可以制作更多的有趣的图案。

设计坞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 用法介绍的更多相关文章

  1. css基础之 font的简写规则 以及 自定义 CSS3 @font-face详细用法

    Part 1 font简写 CSS的命名规则是用英文字母 数字 和下划线(一般用小写)来命名.简写css font的好处有三:一是写起来方便(就像键盘快捷键):二是简化代码:三是帮助你熟悉和深刻理解c ...

  2. pm2常用的命令用法介绍

    pm2 是一个带有负载均衡功能的Node应用的进程管理器.当你要把你的独立代码利用全部的服务器上的所有CPU,并保证进程永远都活着,0秒的重载, PM2是完美的,下面我们来看pm2常用的命令用法介绍吧 ...

  3. MyEclipse相关用法介绍

    MyEclipse相关用法介绍 ================================================================================ 编辑: ...

  4. 一个由正则表达式引发的血案 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. 一些特殊字符,如“&”,“- ...

  5. 好压(HaoZip)的命令行模式用法介绍

    好压压缩软件,又叫“2345好压”,是一款国产的优秀压缩软件,目前是免费的,据官网介绍,该软件永久免费.官网地址:http://haozip.2345.com/ 本文主要对该软件的命令行模式用法进行介 ...

  6. sql事务(Transaction)用法介绍及回滚实例

    sql事务(Transaction)用法介绍及回滚实例 事务(Transaction)是并发控制的单位,是用户定义的一个操作序列.这些操作要么都做,要么都不做,是一个不可分割的工作单位.通过事务, S ...

  7. CSS3的@keyframes用法详解:

    CSS3的@keyframes用法详解:此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识:keyframes ...

  8. STL vector用法介绍

    STL vector用法介绍 介绍 这篇文章的目的是为了介绍std::vector,如何恰当地使用它们的成员函数等操作.本文中还讨论了条件函数和函数指针在迭代算法中使用,如在remove_if()和f ...

  9. 怎么通过activity里面的一个按钮跳转到另一个fragment(android FragmentTransaction.replace的用法介绍)

    即:android FragmentTransaction.replace的用法介绍 Fragment的生命周期和它的宿主Activity密切相关,几乎和宿主Activity的生命周期一致,他们之间最 ...

  10. CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板。

    CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板. CLIP PATH (MASK) GENERATO ...

随机推荐

  1. Linux 用户和用户组管理-用户信息文件

    用户信息文件存在在/etc/passwd中,vi /etc/passwd 其中,有七列以:分隔的信息 第一列表示用户(account),第二列表示密码标志(真正的密码存在在/etc/shadow中), ...

  2. 纯正中文版本pi-star系统下载

    基于3.4.17修改(稳定,发热量少) 不支持RPI 4 a/b+ 完美支持树莓派0,1,2,3 默认刷好卡,启动已经设置好所有参数(选好TFT屏幕,调制解调器类型GPIO,打开了DMR服务器(460 ...

  3. 服务端监控工具Nmon使用方法

    一.认识nmon 1.简介 nmon是一种在AIX与各种Linux操作系统上广泛使用的监控与分析工具,它能在系统运行过程中实时地捕捉系统资源的使用情况,记录的信息比较全面, 并且能输出结果到文件中,然 ...

  4. 浅谈Unity的脚本执行顺序

    一.添加脚本的顺序 这是一张官方的脚本顺序图 一般,当我们把脚本绑定在游戏对象上时,或者点击绑定好的脚本的reset按钮时,会调用Reset() 当我们初始化一个对象时,会先调用Awake()在调用O ...

  5. curl: (35) LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to storage.googleapis.com:443

    安装nvm的时候, ➜  ~ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash 错 ...

  6. jetty 启动项目在pom.xml 的配置

    <build> <finalName>${artifactId}</finalName> <resources> <resource> &l ...

  7. Nginx思维导图

    1. Nginx简介 1.1 nginx概述 1.2 nginx的安装及程序环境 1.3 零复制&五种IO模型 1.4 nginx的基本配置 2. Nginx配置详解 2.1 main配置段详 ...

  8. 千万不要更新网易云音乐UWP!!!!!

    网易云音乐UWP没了!!! 现在 Micrsoft Store 里面的是垃圾 Win32 转置版!!!! 万不可更新!!! 若已经更新,还有救回来的办法:下载 https://lanzous.com/ ...

  9. vue-toy: 200行代码模拟Vue实现

    vue-toy 200行左右代码模拟vue实现,视图渲染部分使用React来代替Snabbdom,欢迎Star. 项目地址:https://github.com/bplok20010/vue-toy ...

  10. 基于Python3.7的robotframework环境搭建步骤

    一.前言 Robot Framework作为公司能快速落地实现UI自动化测试的一款框架,同时也非常适合刚入门自动化测试的朋友们去快速学习自动化,笔者计划通过从搭建逐步到完成自动化测试的过程来整体描述它 ...