CSS动态虚线边框

.gradient {

  background: linear-gradient(90deg, rgb(250, 46, 46) 50%, transparent 0) repeat-x, linear-gradient(90deg, rgb(250, 46, 46) 50%, transparent 0) repeat-x, linear-gradient(0deg, rgb(250, 46, 46) 50%, transparent 0) repeat-y, linear-gradient(0deg, rgb(250, 46, 46) 50%, transparent 0) repeat-y;

  background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;

  background-position: 0 0, 0 100%, 0 0, 100% 0;

  cursor: pointer;

  -webkit-animation: linearGradientMove 0.3s infinite linear;

          animation: linearGradientMove 0.3s infinite linear;

}

@-webkit-keyframes linearGradientMove {
  100% {
    background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
  }
}

@keyframes linearGradientMove {

  100% {

    background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;

  }

}