🎯《前线业务开发01：破解星野App滑动遮罩效果》我们常常面对这样的挑战：产品经理天马行空的创意、设计师精益求精的细节

🚩第一章：需求分析——星野App的效果

效果拆解

半屏遮罩：滑动时遮罩覆盖下半部分内容
丝滑过渡：遮罩展开/收起时的平滑动画
动态背景(附加业务)：背景图非静态图，需实时适配

✈️第二章：开发思路

初始思路：背景图遮罩

使用另一张相同的背景图遮挡在底图上方；由于附加业务的限制（图片是实时变化的，并且不是相同的变化），直接放弃

初步尝试：透明div

使用一个透明的div，从高度0变化到50vh，尝试后发现div会将内容直接顶下去，此路不通

灵感闪现：mask-image救赎

以前很少用到这个属性，在搜索过程中这个属性也是映入眼帘，发现就应该用这个属性做；具体实现如下

问题：mask-image不支持transition过渡动画

初步解决方案：手动写keyframes动画实现变化


@keyframes mask-animate {
  0% {
    mask-image: linear-gradient(to bottom, transparent 0%, black 2%);
  }

  10% {
    mask-image: linear-gradient(to bottom, transparent 8%, black 10%);
  }
  
  /** 以此类推... **/
  
  100% {
    mask-image: linear-gradient(to bottom, transparent 48%, black 50%);
  }
}

终极方案：@property自定义属性

@property --mask-percent {  
  syntax: '<percentage>';  
  inherits: false;  
  initial-value: 0%;  
}  

.mask {  
  mask-image: linear-gradient(to bottom, transparent var(--mask-percent), black var(--mask-percent));  
  transition: --mask-percent 0.3s ease;  
}

实现效果:

向上滚动收起遮罩：--mask-percent: 100%
滚动到底部展开遮罩：--mask-percent: 0%

💻第三章完整代码Demo

🏁第四章总结

技术收获

CSS Houdini：通过@property自定义属性，突破了mask-image无法过渡的限制，展现了未来CSS技术的潜力。
动态背景透明遮罩的通用解法：mask-image的灵活运用，为动态背景下的遮罩效果提供了解决方案

📢📢📢预告

全新的文章系列——「前线业务开发」。这个系列将聚焦于笔者自己真实业务中的真实需求，分享从需求分析、技术选型到最终实现的完整过程。每一篇文章都将包含：

业务场景还原：还原真实需求背景，明确技术挑战。
技术方案探索：从多个角度分析可能的解决方案，记录踩坑与优化过程。
代码实现与优化：提供可直接复用的代码，并分享性能优化技巧。
总结与思考：提炼通用解法，为类似场景提供参考。

当然，笔者还是小牛马，更新时间不定请谅解🫡🫡🫡🫡🫡大家有想分享的解决的没解决的需求，也可以私信我一起探讨

🎯《前线业务开发01：破解星野App滑动遮罩效果》