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



.dotted_box {
  width: 200px;
  height: 100px;
  cursor: pointer;

  background: linear-gradient(90deg, #333 50%, transparent 50%) 0 0 / 4px 1px repeat-x, linear-gradient(90deg, #333 50%, transparent 50%) 0 100% / 4px 1px repeat-x,
    linear-gradient(0, #333 50%, transparent 50%) 0 0 / 1px 4px repeat-y, linear-gradient(0, #333 50%, transparent 50%) 100% 0 / 1px 4px repeat-y;

  &:hover {
    outline: none;
    animation: linearGradientMove 0.1s 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.