CSS reveal文字效果调整：修改遮罩动画起止位置的实现咨询

需求1：实现遮罩从右侧计数的80%宽度过渡到右侧计数的60%宽度 #

核心逻辑是使用right属性作为定位基准，保证所有宽度计算以右侧边缘为参照，不需要依赖左侧坐标：

• 第一步：修改.text::before基础样式，添加right: 0声明，锚定遮罩右边缘与父容器右边缘对齐
• 第二步：编写对应reveal动画关键帧：

@keyframes reveal {
  0% {
    /* 右侧计数80%宽度：遮罩总宽度占父容器80%，完全靠右对齐 */
    width: 80%;
  }
  100% {
    /* 右侧计数60%宽度：遮罩总宽度收缩为父容器60%，保持右对齐 */
    width: 60%;
  }
}

如果需要调整为遮罩左边缘从「距右侧80%位置」移动到「距右侧60%位置」、宽度固定的场景，直接修改right属性即可：

@keyframes reveal {
  0% {
    right: 80%;
    width: 100px; /* 可自定义固定宽度 */
  }
  100% {
    right: 60%;
    width: 100px;
  }
}

需求2：实现遮罩从左侧40%宽度位置开始，向右侧收缩为小区域 #

核心逻辑是通过left属性控制左边缘位置，配合右边缘固定实现收缩效果：

• 第一步：可以移除.text::before中原有的width: 100%声明，改用左右定位控制宽度更灵活
• 第二步：编写对应reveal动画关键帧：

@keyframes reveal {
  0% {
    /* 初始状态：左边缘停在左侧40%位置，右边缘贴齐父容器右侧，覆盖40%~100%的区域 */
    left: 40%;
    right: 0;
  }
  100% {
    /* 最终状态：收缩为宽度50px的小区域，贴齐右侧，可按需调整最终宽度 */
    left: calc(100% - 50px);
    right: 0;
  }
}

如果需要最终收缩的小区域有透明度变化或者其他样式，也可以在100%关键帧中添加对应属性。

内容的提问来源于stack exchange，提问作者jacobcan118