css：repeating-linear-gradient实现托尼老师理发店门口的灯柱子

<link rel="stylesheet/less"
        type="text/css"
        href="style.less" />
  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script>
  <div class="bar"></div>
  <div class="bar overflow"></div>

html,
body {
  width: 100%;
  height: 100%;
  display: flex;
}
.bar {
  position: relative;
  width: 40px;
  height: 400px;
  margin: auto;
  border-radius: 20px;
  border: 1px solid #000;
  background: #ffba01;
  &::before {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    width: 100px;
    height: 400px;
    background: repeating-linear-gradient(
      135deg,
      #f06a0e,
      #f06a0e 10px,
      transparent 11px,
      transparent 19px,
      #f06a0e 20px
    );
    background-position: 0 0;
    background-repeat: no-repeat;
    animation: move 1s linear infinite;
  }
}
.overflow {
  overflow: hidden;
}
@keyframes move {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 58px 0;
  }
}