html一张很长的背景 一直滑动,纯htmlcss实现一个炫酷的无限滚动动效

1. 先看需求

某次迭代中接到的需求是做一个无限滚动的斜滑模块，如下图所示，一定数量游戏icon源源不断的从右上方滑出，循环往复。

可以先看看下方的实现效果~

(因为图片大小问题，只截取了一部分。实际效果是一直滚动，不会有动画复位的割裂感。)

2. 问题拆分

看到这个需求的时候，感觉有点复杂，icon错位排列，斜着滚动，无限滚动...

后来考虑了下，对这个问题进行了下面步骤的拆分：编写各个容器及icon等基本样式

进行整体的布局(包含倾斜等)

添加无限的横向滚动动画

话不多说，手撸一下代码

3. 开始行动

(为了方便看边界，对于一些dom添加了边框)

3.1 创建容器

容器是一个固定大小带圆角的区域，比较好写.box {

height: 666px;

width: 1182px;

border-radius: 36px;

border: 1px solid;

overflow: hidden;

text-align: center;

font-size: 30px;

}

3.2 然后撸个icon出来

这里用下面的mock下icon~

.icon {

width: 267px;

height: 267px;

border-radius: calc(267px * 0.23);

background-image: conic-gradient(

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 排列icon到wrapper中

我们把脖子沿逆时针方向旋转30度看到，这个排列实际上就是错落有致的摆放着两排icon。

我们按照图示静态的摆放一下：

html

1

2