<div class="item"><div>
@keyframes linearGradientMove {
    100% {
        background-position: 10px 0, -10px 100%, 0 -10px, 100% 10px;
    }
}

.item {
  width: 200px;
  height: 100px;
  border-width: 5px;
  margin: 15%;
   // 渐变轴为90度,#333 设置占了图片的 50%。 透明部分占了50%
  background: 
    linear-gradient(90deg, #333 50%, transparent 50%) repeat-x,
    linear-gradient(90deg, #333 50%, transparent 50%) repeat-x,
    linear-gradient(0deg, #333 50%, transparent 50%) repeat-y,
    linear-gradient(0deg, #333 50%, transparent 50%) repeat-y;
  // 设置背景图片大小
  background-size: 10px 2px, 10px 2px, 2px 10px, 2px 10px;
  // 为每一个背景图片设置初位置
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  
  animation: linearGradientMove 0.5s linear infinite;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.