透明渐变菜单

Question

我有一个复杂的问题。我想创建一个菜单。同时只有3个元素可见，另外2个是透明渐变。如果我将光标移动到透明元素中，列表将向上或向下滚动。菜单菜单具有子级别，其格式与主级别相同。

以下是一个示例：

当它停止时，没关系。第一个和最后一个显示元素的CSS设置线性渐变。当它移动时，我使用jquery来动画移动。但结果并不完全是我想要的。当它滚动时，看起来整个列表正在移动，而不是滚动。我想使用jQuery只是移动动画，透明渐变设置整个列表，而不是列表元素。

我想我应该使用掩码作为列表，但背景也是透明的。我没有想法。

Answer 1

我解决了。我使用“overflow：hidden”和svg mask。子级别是另一个ul列表，不包括在第一级，jquery设置显示。