• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

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

JavaScript web前端中文站 2年前 (2017-11-30) 1218次浏览 已收录 0个评论

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

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

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

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

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="https://www.lisa33xiaoq.net/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>

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:使用 clip-path 实现任意元素 碎片飞入动画效果
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址