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>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

style.less

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;
  }
}


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
  
50
  
51
 

在线demo: https://mouday.github.io/front-end-demo/css-repeating-linear-gradient/index.html

参考
CSS技巧：理发店门口的柱子效果

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/122123425