使用clip-path实现任意元素的碎片飞入动画效果

公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序

腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

clip-path 是CSS3 中的一个属性。该属性可以防止部分元素通过定义的剪切区域来显示，仅通过显示的特殊区域。剪切区域是被URL定义的路径代替行内或者外部svg，或者定义路线的方法例如circle()。clip-path属性代替了现在已经弃用的剪切 clip属性。

clip-path之所以没有很普及，是因为其浏览器兼容问题。很多IE浏览器对齐属性不是很支持。我们看下他的浏览器兼容：

IE完全不支持，尽量使用webkit内核，需要加上内核前缀-webkit-。

clip-path 语法

关于 clip-path 语法介绍的文章不是很多，我这里贴一个总结。

clip-path: none; 
clip-path: url(resources.svg#c1);
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
clip-path: margin-box
clip-path: border-box
clip-path: padding-box
clip-path: content-box
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: padding-box circle(50px at 0 100px);
clip-path: inherit;
clip-path: initial;
clip-path: unset;

部分参数解释

• url()：代表剪切元素的路径
• inset(), circle(), ellipse(), polygon()：一个 <basic-shape> 方法. 这种形状将会利用指定的<geometry-box>来定位和固定基本形状。如果没有geometry box（几何盒模型）特别指出的话，border-box将会是默认的盒模型。
• <geometry-box>如果同<basic-shape>一起声明，它将为基本形状提供相应的参考盒子。通过自定义，它将利用确定的盒子边缘包括任何形状边角（比如说，被border-radius定义的剪切路径）。几何体盒子将会有以下的值：
  fill-box
  利用对象边界框作为引用框。
  stroke-box
  使用笔触边界框作为引用框
  view-box
  使用最近的SVG视口作为引用框。如果viewBox 属性被指定来为元素创建SVG视口，引用框将会被定位在坐标系的原点，引用框位于由view-box属性建立的坐标系的原点，引用框的尺寸用来设置viewbox属性的宽高值。
  margin-box
  使用 margin box 作为引用框
  border-box
  使用 border box 作为引用框.
  padding-box
  使用 padding box 作为引用框.
  content-box
  使用 content box 作为引用框
• none：这里没有创建的剪切路径。

例子

下面我们来实现本文标题所说的使用clip-path实现任意元素的碎片飞入动画效果的案例实现。

首先是编写HTML代码：

<strong>1. 普通带文本的元素</strong>
<div class="box active">
    <p id="text" class="text clip">魔兽要上映了...</p>
</div>
<strong>2. 替换元素如图片</strong>
<div class="box active">
    <img id="image" class="image clip" src="http://www.xttblog.com/image/xxxx.jpg">
</div>

接着是CSS3代码：

.clip[style] {
    opacity: 0;
}
.active .clip:not([style]) {
    opacity: 0;
    animation: fadeIn .1s .4s both;
}
.active .clip[style] {
    will-change: transform;
    animation: noTransform .5s both;
}
@keyframes noTransform {
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0);
    }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.box { height: 190px; }
.text { position: absolute; width: 300px; }
.image { position: absolute; }

最后是JavaScript 代码：

var eleText = document.getElementById('text'),
	eleImage = document.getElementById('image');
// 父级元素
var eleParentText = eleText.parentNode,
	eleParentImage = eleImage.parentNode;
var eleBtnText = document.getElementById('playText'),
	eleBtnImage = document.getElementById('playImage');
var isSupport = 
// 碎片特效初始化
clipPath(eleText);
clipPath(eleImage);
// 点击播放
if (isSupport) {
	eleBtnText.onclick = function() {
		eleParentText.classList.remove('active');	
		eleParentText.offsetHeight;
		eleParentText.classList.add('active');
	};	
	eleBtnImage.onclick = function() {
		eleParentImage.classList.remove('active');	
		eleParentImage.offsetHeight;
		eleParentImage.classList.add('active');
	};	
}

文中用到的clipPath方法已被已被我共享到了github，下载地址是：https://github.com/xmt1139057136/clipPath-min.js。

参考资料

• clip-path
• <clipPath>

最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

本文原文出处：业余草： » 使用clip-path实现任意元素的碎片飞入动画效果