对于几乎每一个入行前端的小伙伴来说,轮播图几乎都是必修课,但是,只是单纯的切换过渡可能并不能满足于你追求酷炫的心hh,那么这里就教你利用css3的clip-path来模拟碎片并为你的轮播图添加碎片轮播的效果!
Part 1.碎片化是如何实现的?
对于一张图片来说,如果在原有的基础上添加一层蒙版,遮蔽住不想让用户见到的视图,剩下的视图即可作为一个’碎片’,这层蒙版效果我们怎么制作?答案就是利用clip-path
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:缩小动画得注意变形基点,否则变形基点默认位于图片中部而不是碎片中部,放缩的效果会大打折扣!