擦亮容器

擦亮容器用于在内容区域上叠加闪光划过的动态效果：

下层放产品图、按钮等实际内容，上层放一张「擦亮图」，发布后利用旺铺页面已有动画样式，形成光线扫过的亮眼效果。

适合海报、主推位、活动条等需要吸睛的模块。

从左侧 「容器」 拖入 「擦亮容器」，设置擦亮图与区域大小，再把内容拖进「内容容器」即可。常配合「图片背景容器」使用。

组件能做什么

• 擦亮动画：线上自动呈现闪光扫过效果，无需手写动画代码。
• 内容 + 擦亮分层：内部放展示内容，上层「擦亮图片」负责光效。
• 擦亮图可更换：在属性里设置「遮罩地址」（即擦亮图），一般使用带透明背景的光条、高光 PNG。
• 区域可调：内容区宽高、内边距、擦亮图大小均可调整；换图后会尝试按图片尺寸更新擦亮图宽高。
• 子元素联动：开启后，内部子组件随容器一起缩放，方便整体对齐切图。

设置项说明

位置与大小

容器可拖动摆放；左边距、上边距在样式里微调。图层中的「擦亮图片」可单独拖拽缩放，与属性里的擦亮图尺寸对应。

[图片占位 擦亮容器属性面板截图]

常见用法

首页主推 Banner

大图上某一区块需要周期性「扫光」时，用擦亮容器包住该区域图片，再叠设计师提供的光条 PNG。

产品卡片高光

产品区单个卡片需要醒目动效时，在卡片位置放擦亮容器，内容区放产品图，擦亮图用细长高光条对齐卡片范围。

注意事项

• 擦亮图需单独准备：一般为横向光带、斜向高光等 PNG，不是整张产品图。
• 效果依赖页面样式：动画使用旺铺已加载的页面样式，预览与线上请以旺铺预览为准。
• 放在父容器内：建议置于「图片背景容器」里，避免定位偏移。
• 点击跳转另配：擦亮层主要做视觉；跳转请在内容区用热区或图片链接。
• 与透镜勿混淆：透镜偏镂空开窗；擦亮偏动态扫光，二者擦亮图用法不同。

推荐操作顺序

1. 在背景容器内拖入「擦亮容器」并对齐位置；
2. 设置内容区宽度、高度及「遮罩地址」（擦亮图）；
3. 将产品图等拖入「内容容器」；
4. 微调擦亮图大小，开启「子元素联动」；
5. 旺铺预览查看扫光效果，满意后保存发布。

如有疑问，可结合「图片背景容器」「透镜容器」文档一起查看。