实现边框loading动画效果 - 翁先森的博客

效果图如下
代码如下：
1
<body>
2
  <style>
3
    .box {
4
      display: inline-block;
5
      position: relative;
6
      width: 220px;
7
      height: 100px;
8
      box-sizing: border-box;
9
    }
10

11
    .box::before {
12
      content: '';
13
      position: absolute;
14
      left: -4px;
15
      top: -4px;
16
      right: 0;
17
      width: 228px;
18
      height: 108px;
19
      bottom: 0;
20
      z-index: -1;
21
      box-sizing: border-box;
22
      border-radius: 5px;
23
      background: linear-gradient(to right, #0638a8, #0ab7f9, #06a892);
24
      box-sizing: border-box;
25
      animation: borderAround 1.5s infinite linear;
26
    }
27

28
    @keyframes borderAround {
29

30
      0%,
31
      100% {
32
        clip: rect(0 228px 4px 76px);
33
      }
34

35
      10% {
36
        clip: rect(0, 152px, 4px, 0);
37
      }
38

39
      20% {
40
        clip: rect(0, 76px, 54px, 0);
41
      }
42

43
      30% {
44
        clip: rect(0, 4px, 112px, 0);
45
      }
46

47
      40% {
48
        clip: rect(54px, 76px, 112px, 0);
49
      }
50

51
      50% {
52
        clip: rect(104px, 152px, 112px, 0);
53
      }
54

55
      60% {
56
        clip: rect(104px, 228px, 112px, 76px);
57
      }
58

59
      70% {
60
        clip: rect(54px, 228px, 112px, 152px);
61
      }
62

63
      80% {
64
        clip: rect(0, 228px, 112px, 224px);
65
      }
66

67
      90% {
68
        clip: rect(0, 228px, 54px, 152px);
69
      }
70
    }
71

72
    .child {
73
      width: 100%;
74
      height: 100%;
75
      background: #FFF;
76
      z-index: 999;
77
    }
78
  </style>
79

80
  <div class="box">
81
    <div class="child">
82
      dsadasd
83
    </div>
84
  </div>
85
</body>