http://shiftsneaker.com/网站上的运动鞋如何工作?

它主要使用两种技术的组合:

  • PNG遮罩
  • SVG

这是鞋子的PNG遮罩:

如您所见,鞋子的选中部分是透明的。 使用背景渐变(在这种情况下,它应用于包含蒙版的元素作为背景图像),您将完成效果的主要部分:

“换档”使用了相同的技术

现在添加一些用SVG完成的形状:

你得到这个:

然后,当您点击此按钮3时,追加:

  • 背景渐变颜色平滑(带有褪色)更新
  • 来自色带的颜色是基于渐变颜色的更新(注意它们的饱和度较低/较浅)
  • 形状中的位置有些变化,然后恢复

希望对您有所帮助

巴蒂斯特