<div class="item"><div>
.item {
    position: relative;
    width: 200px;
    height: 110px;
    margin: 10%;
    overflow: hidden;
    &::after {
        content: '';
        position: absolute;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background: 
          linear-gradient(#399953, #399953) no-repeat, 
          linear-gradient(#fbb300, #fbb300) no-repeat, 
          linear-gradient(#d53e33, #d53e33) no-repeat, 
          linear-gradient(#377af5, #377af5) no-repeat;
        background-size: 50% 50%, 50% 50%,50% 50%, 50% 50%;
        background-position: 0 0, 100% 0, 100% 100%, 0 100%;
        // 添加动画
        animation: rotate 4s linear infinite;
    }
  
}
@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.