HTML中基于CSS Grid实现滚动图文页面横幅图片视口移动切换的 Full-Bleed 布局

    这是一款比较流行的全屏出血（Full-Bleed 布局）横幅效果，HTML页面中包含多张图片和文字内容时，图片以全屏横幅的形式穿插于HTML页面的文字内容中间，初始阶段会有文字内容遮盖图片部分区域，当滚动鼠标时会逐渐展现单张图片的全貌，随后切换到下一张图片继续展示。这个效果通过CSS的calc()函数来设置margin-left值，从而避免使用transform进行初始定位。这种方法简化了元素在动画之前的布局，使得位置调整更加直观和易于管理。对于动画处理，作者倾向于不使用transform进行初始定位，以避免在每个关键帧中链接转换或添加额外的嵌套元素来分别处理定位和动画，保持代码简洁并提高可维护性。