.item {
    position: relative;
    width: 200px;
    height: 110px;
    margin: 10%;
    overflow: hidden;
    &::after {
        content: '';
        position: absolute;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background-repeat: no-repeat;
        background-size: 50% 50%, 50% 50%,50% 50%, 50% 50%;
        background-position: 0 0, 100% 0, 100% 100%, 0 100%;
        background-image: 
          linear-gradient(#399953, #399953), 
          linear-gradient(#fbb300, #fbb300), 
          linear-gradient(#d53e33, #d53e33), 
          linear-gradient(#377af5, #377af5);
      animation: rotate 4s linear infinite;
    }
    
    // 将盒子内部盖住
    &::before {
      content: "";
      top: 10px;
      left: 10px;
      position: absolute;
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      background:#fff;
      z-index: 2;
    } 
}

@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}