CSS半圆弧边框渐显动画右侧遮罩层错位问题求助

问题核心是右侧青柠色遮罩的定位规则缺失，以及背景对齐方式和定位逻辑不匹配，只需修改两处CSS即可实现和左侧完全对称的反向动画效果：

需要修改的CSS规则 #

1. 补充右侧容器伪元素的对称定位规则 #

因为你给遮罩层设置了固定宽度200%，绝对定位下同时设置left和right时仅left生效，导致右侧遮罩初始位置偏移，需要给右侧容器的伪元素指定右对齐：

/* 新增这段规则 */
.section-one .boxes .right-box.right:before, 
.section-one .boxes .right-box.right::after {
    right: 0;
    left: auto;
}

2. 调整右侧遮罩的背景对齐参数 #

右侧遮罩的第一个渐变需要右对齐，才能匹配右侧突出的圆弧边框区域，修改.section-one .boxes .right-box.right::after的background-position属性：

.section-one .boxes .right-box.right::after {
    /* 把原来的background-position: 0 0, 0 75%; 改成下面的 */
    background-position: 100% 0, 0 75%;
    /* 其余原有属性保持不变 */
}

效果说明 #

修改完成后：

• 青柠色遮罩初始位置会完全对齐右侧目标边框区域的左上角
• 动画逻辑和左侧红色遮罩完全一致，仅移动方向相反，实现对称的边框渐显效果
• 原有响应式规则不受影响，小屏适配逻辑可以保留原样

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