css实现类似滑动时间轴

在网页中，滑动时间轴可以让用户更方便地浏览和拖动时间线。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元素的样式。

通过以上CSS代码，我们就实现了一个类似滑动时间轴的效果。