body{
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: radial-gradient(#9bdfff, #009be4);
}

.line{
  /*   绘制线段 */
  width: 800px;
  height: 160px;
  background: #525252;
  position: relative;

  /*   平面旋转——1.设置景深 2.绕x轴 */
  transform: perspective(500px) rotateX(30deg);
  transform-origin: bottom;
  transform-style: preserve-3d;
}

/* 斑马线 */
.line::before{
  content:  '';
  position:  absolute;
  /*   让背景伸开，否则只跟内容长度有关 */
  width:  100%;
  height:  10px;
  background:  linear-gradient(to right, #fff 0%, #fff 70%, #525252 70%, #525252 100%);
  /*   移动到中心 */
  left:  0;
  top:  50%;
  transform:  translateY(-50%);  /*   -50% 元素宽度的一半 */
  /*   根据x方向上的哪根轴进行旋转？ bottom 沿着顶部 */
  transform-origin: bottom;

  /*  缩短长度，从和背景马路的长度缩短，这样再平铺 */
  background-size:  120px;
  /*   background-repeat: no-repeat; */

  /*   最后设置动画 */
  animation:  animate_name 0.5s linear infinite;
}

 /*   关键帧  */
@-webkit-keyframes animate_name{
      0%
      {
        background-position:  0px;
      }
      100%
      {
        background-position:  -120px;
      }
      
  }

/* 底座 */
.line::after{
  content :'';
  position: absolute;
  width: 100%;
  height: 30px;
  background-color: #333333;
  /* 离bottom -30 */
  bottom: -30px;

  transform: perspective(500px) rotateX(-25deg);
  /*   根据x方向上的哪根轴进行旋转？ top 沿着顶部 */
  transform-origin: top;
}

.shadow{
  position: absolute;
  width: 95%;
  height: 60px;
  background: linear-gradient(#000, transparent);
  bottom: -93px;
  transform: translateX(-50%);
  opacity: 0.5;
  left: 400px;
}