在网页中,滑动时间轴可以让用户更方便地浏览和拖动时间线。CSS可以帮助我们实现这个效果。
/* HTML代码 */ <ul class="container"> <li><p>2015年</p></li> <li><p>2016年</p></li> <li><p>2017年</p></li> <li><p>2018年</p></li> <li><p>2019年</p></li> </ul> /* CSS代码 */ .container { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; } .container::-webkit-scrollbar { display: none; } li { scroll-snap-align: center; flex-shrink: 0; width: 100px; height: 100px; border-radius: 50%; background-color: #333; margin: 0 20px; } p { text-align: center; color: #fff; font-size: 18px; margin-top: 40px; }
代码中,我们首先设置容器的display为flex,使得子元素能够横向排列。然后设置overflow-x为auto,让滚动条出现。接着设置scroll-snap-type为x mandatory,让每个子元素对齐容器的边缘。为了去掉滚动条,我们还需要设置scrollbar-width为none和-ms-overflow-style为none。最后,给每个子元素添加scroll-snap-align为center属性,表示对齐容器中央。
此外,我们还需要给每个li元素设置宽度、高度和圆形边框,以及内部p元素的样式。