.item {
    position: relative;
    width: 200px;
    height: 110px;
    margin: 10%;
    overflow: hidden;
    &::after {
        content: '';
        position: absolute;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        // 四种背景图变成一个背景图
        background-image: 
          linear-gradient(#99396e, #399953);
      
        background-repeat: no-repeat;
        background-size: 50% 50%;
        background-position: 0 0;
        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);
  }
}