使用css实现3d管道效果

写着玩玩而已，满足需求的可以使用，但是自己需要修改的更容易维护，我写的只是摸板哦。

 css代码

.yuanzhu {
        position: relative;
        height: 50px;
        width: 200px;
        background: linear-gradient(
          left,
          rgba(36, 221, 241, 0.2),
          rgba(6, 142, 200, 0.2)
        );
        background: -ms-linear-gradient(
          left,
          rgba(36, 221, 241, 0.2),
          rgba(6, 142, 200, 0.2)
        );
        background: -webkit-linear-gradient(
          left,
          rgba(36, 221, 241, 0.2),
          rgba(36, 221, 241, 0.2)
        );
        background: -moz-linear-gradient(
          left,
          rgba(36, 221, 241, 0.2),
          rgba(6, 142, 200, 0.2)
        );
        margin: 30px auto;
        z-index: 999;
      }

      .yuanzhu:before {
        position: absolute !important;
        left: -10px;
        content: "";
        width: 20px;
        height: 50px;
        border-radius: 50%;
        background: linear-gradient(left, #0158a9, rgba(36, 221, 241));
        background: -ms-linear-gradient(left, #0158a9, rgba(36, 221, 241));
        background: -webkit-linear-gradient(left, #0158a9, rgba(36, 221, 241));
        background: -moz-linear-gradient(left, #0158a9, rgba(36, 221, 241));
        z-index: 99;
        position: relative;
      }

      .yuanzhu:after {
        position: absolute;
        right: -10px;
        content: "";
        width: 20px;
        height: 50px;
        border-radius: 50%;
        background: linear-gradient(left, #0158a9, rgba(36, 221, 241));
        background: -ms-linear-gradient(left, #0158a9, rgba(36, 221, 241));
        background: -webkit-linear-gradient(left, #0158a9, rgba(36, 221, 241));
        background: -moz-linear-gradient(left, #0158a9, rgba(36, 221, 241));
        z-index: 9;
      }

      .jiantou {
        width: 187px;
        height: 5px;
        background: linear-gradient(90deg, transparent 50%, #09f32f 0) repeat-x;
        background-size: 20px 5px;
        background-position: 0 0;
        transform: translateY(-50%);
        z-index: 9999;
        position: absolute;
        top: 50%;
        left: 0;
        animation: move21 1s infinite linear;
      }
      .jiantour {
        position: absolute;
        width: 7px;
        height: 7px;
        border-top: 5px solid #09f32f;
        border-right: 5px solid #09f32f;
        left: 169px;
        top: 50%;
        z-index: 9999;
        transform: rotate(45deg) translateY(-9px);
      }

      @keyframes move21 {
        from {
        }
        to {
          background-position: 40px 0;
        }
      }

js代码

<div class="yuanzhu">
      <div class="jiantou"></div>
      <div class="jiantour"></div>
    </div>