Html 如何将转换添加到CSS滑块导航？

我想只使用css和html制作一个类似滑块的水平导航

我正在使用css

：target

，以便移动到所需的目标部分

到目前为止还不错。。。请参见下面的示例：

正文{
保证金：0；
溢出：隐藏；
}
梅因先生{
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
}
部分{
位置：绝对位置；
宽度：100vw；
高度：100Vh；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
过渡：全部3秒；
}
#第一节{
背景：bisque；
转换：translateX（计算（0））；
}
#第2节{
背景#f8cc99；
转换：translateX（计算（100vw*1））；
}
#第三节{
背景：#efcfa9；
转换：translateX（计算（100vw*2））；
}
#第四节{
背景#ffe7c9；
转换：translateX（计算（100vw*3））；
}

第一节
第二节
第三节
第四节

您可以通过向节容器中添加

滚动行为：平滑来解决此问题。您不必为其添加任何转换


@导入url（'https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap'）；
身体{
溢出：隐藏；
边际：0px；
字体系列：'Roboto'，无衬线；
}
梅因先生{
高度：100vh；
显示器：flex；
溢出y：隐藏；
溢出-x：自动；
滚动行为：平滑；
}
部分{
宽度：100vw；
身高：100%；
过渡：全部3秒；
弹性收缩：0；
位置：相对位置；
显示器：flex；
证明内容：中心；
弯曲方向：立柱；
对齐项目：居中；
}
a节{
颜色：#ffffff；
文字装饰：无；
字号：18px；
背景：rgba（0,0,0,0.5）；
填充：10px 25px；
边界半径：50px；
边缘顶部：15px；
}
a部分：悬停{
颜色：#ffffff
}
h1{
颜色：#ffffff；
}
#第一节{
背景：#6200EE；
}
#第2节{
背景#03DAC6；
}
#第三节{
背景：#1A1A；
}
#第四节{
背景：#ff4500；
}

样品
第一节
第二节
第三节
第四节