创建一个带条纹效果的滑块

Question

我想创建一个带有条纹效果的滑块，如下图所示：

他们如何以多种条纹“剪切”图像？ 我想在自定义形状条纹中“剪切”我的图像（不是像示例中那样的默认矩形，而是以自定义方式弯曲）。

链接到实际示例滑块：http://www.jssor.com/demos/x-stripe.html

我只需要概念性的解释，起点，我不指望或想要实际的代码。我在互联网上搜索但是教程只对简单的效果有所帮助，如滑动或褪色我知道如何实施

Answer 1

我已经看到这样做了几个地方......

这些效果的一般想法是创建一系列元素，将其中的图像与过渡图像的适当部分对齐。

这可以通过几种方式完成。在css中使用背景图像设置。或者将img元素放在每个条带内，并将定位设置为绝对值，将左侧设置为与条带位置匹配的负偏移量。然后你为条带设置动画。动画完成后，删除所有条带并替换为原始图像。

希望这可以指出你正确的方向。如果它没有意义，请告诉我。

对于弯曲切割 - 这可能是一个用html / javascript拉开的小动作......但是你可以使用border-radius来切割条带的角落。这样做的数字很大 - 例如100px半径，你可以拉开圆圈。

另一个替代方案可能是使用带有背景图像的SVG - 但我还没有尝试将它们混合在一起 - 你需要调查它。