设计问能不能实现这种碎片化的效果 点击关注公众号，“技术干货”及时达！前言某天设计发来一个 网站，问我能不能实现这种类似的效果。 不知你们什么感想，反正我当时第一次看到这个网站的效果时，心里第一反应就是这做个锤子啊。F12 调试让我们打开调试，瞅瞅别人是如何实现。 可以看到在该层级下，页面有很多个 shard-wrap 元素，而每一个元素都是定位覆盖其父元素的。 当我们添加 display: none; 后，可以看到嘴角这里少了一块。 而继续展开其内部的元素就可以看到主要的实现原理了：clip-path: polygon();。 clip-path 和 polygon 更详细的解释可以看 MDN，简单来说就是在一个 div 里面绘制一个多边形。 比如上图的意思就是：选取 div 内部坐标为 (9.38%,59.35%)，(13.4%,58.95%)，(9.28%,61.08%) 这三个点，并将其连起来，所以就能构成一个三角形了。然后再填充 backgroundColor 该三角形就有对应颜色了。 实现过程调试看完别人的实现后发现，好像也不是很难。但是数据又如何搞来呢? 当然我们可以直接在接口那里找别人的数据，但是我找了一会发现不太好找。 于是想到咱们可是一名前端啊，简单写段 js 扒拉下来不就好了吗，想要更多，就滑一下滚轮，切换下一个碎片图像，再执行一次即可。 functiongetShardDomData(){ constdoms=document.getElementsByClassName('shard') constlist=[] for(leti=0;idoms.length;i++){ conststyle=window.getComputedStyle(doms[i]) letstr=style.clipPath.replace('polygon(','').replace(')','') list.push({ polygon:str, color:style.backgroundColor, }) } returnlist } console.log('res:',getShardDomData()); 碎片化组件简单封装一个碎片化组件，通过 transition 和 delay 增加动画效果以及延迟，即可实现切换时的碎片化动画效果。我这里是用的 tailwindcss 开发的，大家可以换成对应 css 即可。 exporttypeShardComItem={ color:string polygon:string } exporttypeShardComProps={ items:ShardComItem[] } exportdefaultfunctionShardCom({items}:ShardComProps){ return( divclassName="relativew-fullh-fullmin-w-20" {items?.map((item,index)=( divclassName="absolutew-fullh-full"key={`${index}`} div className="w-fullh-fulltransition-allduration-1000ease-in-out" style={{ backgroundColor:item.color, clipPath:`polygon(${item.polygon})`, transitionDelay:`${index*15}ms`, }} /div /div ))} /div ) } 模仿实现的 demo 地址 组件的代码放码上掘金了，感兴趣可以自提。 链接：https://code.juejin.cn/pen/7371379371631706150 自制画板绘画 clip-path当然只扒拉别人的数据，这肯定是不行的，假如设计师想自己设计一份碎片化效果该怎么办呢？ 解决方法也很简单：那就自己简单开发一个绘图界面，让设计师自己来拖拽生成想要的效果即可。 线上画板地址 画板的实现就放到 下篇文章 中讲述了。 最后当然最终只是简陋的实现了一部分效果罢了，还是缺少很多动画的，和 原网站 存在不少差距的，大家看个乐就行。 点击关注公众号，“技术干货”及时达！ 阅读原文