1。先看需求某次迭代接到的需求是做一个无限滚动的倾斜模块，如下图，不断有一定数量的游戏图标从右上方滑出，如此循环往复。可以先看看下面的实现效果~codepen体验（因为图片的大小，只截取了一部分，实际效果是一直滚动，没有动画重置的碎片感。）2.问题拆分看到这个需求的时候，感觉有点复杂，图标错位，倾斜滚动，无限滚动……想了想，我把这个问题拆分成了以下几步：写出整体的各个容器和图标的基本样式布局（包括倾斜等）添加无限水平滚动动画不多说了，滚代码3.开始行动（为了方便查看边框，在一些doms上添加了边框）3.1创建容器container是固定大小的圆角区域，写起来比较方便。框{高度：666px;宽度：1182px；边界半径：36px；边框：1px实心；溢出：隐藏；文本对齐：居中；font-size:30px;}3.2然后推出一个icon，使用下面的mockicon~.icon{width:267px;高度：267px；边界半径：计算（267px*0.23）；背景图像：圆锥梯度（hsl(360,100%,50%),hsl(315,100%,50%),hsl(270,100%,50%),hsl(225,100%,50%),hsl(180,100%,50%),hsl(135,100%,50%),hsl(90,100%,50%),hsl(45,100%,50%),hsl(0,100%,50%));}3.3将图标排列到包装器中我们将脖子逆时针旋转30°，一看这个排列其实就是两排图标匀称排列。我们按图片显示静态的摆放一下：html
