请问用css3如何实现如下效果

---

挖源码：

---

补充-关于代码格式化

我使用的 Microsoft Edge

一般人用的 Chrome

---

---

f12查看源码

---

挖了一下源碼沒看見 clipMe ，參考網路上的資料，自己實現了下，效果是一樣的：

實現在這

.square, .square::before, .square::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.square {
  width: 200px;
  height: 200px;
  margin: auto;
  background: #f75151;
}

.square:before, .square:after {
  content: '';
  z-index: -1;
  margin: -5%;
  box-shadow: inset 0 0 0 2px;
  animation: line 8s linear infinite;
}

.square::before {
  animation-delay: -4s;
}

@keyframes line {
  0%, 100% {
    clip: rect(0px, 220px, 2px, 0px);
  }
  25% {
    clip: rect(0px, 2px, 220px, 0px);
  } 
  50% {
    clip: rect(218px, 220px, 220px, 0px);
  }
  75% {
    clip: rect(0px, 220px, 220px, 218px);
  }
}

@-webkit-keyframes line {
  0%, 100% {
    clip: rect(0px, 220px, 2px, 0px);
  }
  25% {
    clip: rect(0px, 2px, 220px, 0px);
  } 
  50% {
    clip: rect(218px, 220px, 220px, 0px);
  }
  75% {
    clip: rect(0px, 220px, 220px, 218px);
  }
}