标签：轮播 clip photo ease 碎片 写出 path

对于几乎每一个入行前端的小伙伴来说,轮播图几乎都是必修课,但是，只是单纯的切换过渡可能并不能满足于你追求酷炫的心hh，那么这里就教你利用css3的clip-path来模拟碎片并为你的轮播图添加碎片轮播的效果！

Part 1.碎片化是如何实现的?

对于一张图片来说，如果在原有的基础上添加一层蒙版，遮蔽住不想让用户见到的视图,剩下的视图即可作为一个'碎片',这层蒙版效果我们怎么制作？答案就是利用clip-path

Clippy是一个可视化clip-path操作网站，你可以在上面直接制作你想要的蒙版效果!
https://bennettfeely.com/clippy/
如果对于这个蒙版的概念你还不甚了解,你可以自己去这个网站操作熟悉。

Part 2. 轮播图中的碎片是怎么样的？

1.

.photo .photo-clip:nth-of-type(1) {
/*photo-clip是每一个碎片对应的包裹的div盒子*/
  clip-path: polygon(0 0, 0 40%, 25% 0);
}

2.

.photo .photo-clip:nth-of-type(2) {
/*photo-clip是每一个碎片对应的包裹的div盒子*/
  clip-path: polygon(25.3% 0, 65% 0, 8% 100%, 0 100%, 0 40.5%);
}

因此,利用clip-path就可以做出一个一个碎片!

part 3.如何把碎片叠放在一起?

很简单利用绝对定位即可

.photo .photo-clip {
/*省略其他属性*/
/*photo-clip是每一个碎片对应的包裹的div盒子*/
  position: absolute;
}

part 4.如何制作碎片的飞入飞出效果?

其实也很简单，仔细看文首gif你会发现碎片的飞出动效无非是两种
1.移动
2.缩小
那么飞入动效也只是飞出动效的反转而已！

up-leave {
/*从上方飞出*/
  animation: move 1s ease-in;
}
.up-enter {
/*从上方飞入*/
  animation: move 1s ease-in reverse;
}
.down-leave {
/*从下方飞出*/
  animation: moveRev 1s ease-in;
}
.down-enter {
/*从下方飞入*/
  animation: moveRev 1s ease-in reverse;
}
@keyframes move {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(50%, -84%) scale(0);
  }
}
@keyframes moveRev {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(-50%, 84%) scale(0);
  }
}

每次点击轮播切换按钮时，只需要动态的添加up-leave up-enter down-leave down-enter 即可完成碎片轮播的效果！
PS：缩小动画得注意变形基点，否则变形基点默认位于图片中部而不是碎片中部，放缩的效果会大打折扣！

标签：轮播,clip,photo,ease,碎片,写出,path
来源： https://www.cnblogs.com/moushicheng/p/15861236.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。