成果展示

如果显示出现问题则说明你的浏览器不支持clip-path

浏览器支持:
Chrome 55+
Firefox 54+

主要思路

使用伪元素实现一个大于目标元素的背景板.
再使用clip-path将其裁剪到只剩上/下/左/右一个边.
再使用animation实现动画效果.

实现过程

写一个普通的button

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
  .content {
    width: 180px;
    height: 64px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    position: relative;
    font-size: 24px;
  }
  </style>
</head>
<body>
  <button class="content">我是内容</button>
</body>
</html>

加上::before

.content::before {
  content: '';
  position: absolute;
  top: -2px; bottom: -2px;
  left: -2px; right: -2px;
  background: olivedrab;
  border: 2px solid olive;
  z-index: -1;
}

使用clip-path裁剪

.content::before {
  /* 上 */
  clip-path: inset(0 0 calc(100% - 2px) 0);
  /* 右 */
  clip-path: inset(0 0 0 calc(100% - 2px));
  /* 下 */
  clip-path: inset(calc(100% - 2px) 0 0 0);
  /* 左 */
  clip-path: inset(0 calc(100% - 2px) 0 0);
}

使用animation实现动画效果

.content::before {
  content: '';
  position: absolute;
  top: -2px; bottom: -2px;
  left: -2px; right: -2px;
  background: olivedrab;
  border: 2px solid olive;
  z-index: -1;
  animation: snake 10s linear infinite;
}

@keyframes snake {
  0%, 100% {
    clip-path: inset(0 0 calc(100% - 2px) 0);
  }
  25%{
    clip-path: inset(0 0 0 calc(100% - 2px));
  }
  50%{
    clip-path: inset(calc(100% - 2px) 0 0 0);
  }
  75%{
    clip-path: inset(0 calc(100% - 2px) 0 0);
  }
}

去掉伪元素的背景

.content {
  width: 180px;
  height: 64px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  position: relative;
  font-size: 24px;
}
.content::before {
  content: '';
  position: absolute;
  top: -2px; bottom: -2px;
  left: -2px; right: -2px;
}
.content::before {
  border: 2px solid olive;
  animation: snake 4s linear infinite;
}

@keyframes snake {
  0%, 100% {
    clip-path: inset(0 0 calc(100% - 2px) 0);
  }
  25%{
    clip-path: inset(0 0 0 calc(100% - 2px));
  }
  50%{
    clip-path: inset(calc(100% - 2px) 0 0 0);
  }
  75%{
    clip-path: inset(0 calc(100% - 2px) 0 0);
  }
}

再使用::after 伪元素添加一个新的边框，再使用animation-delay 错开动画时间