<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>rotate</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .wrapper {
        width: 170px;
        height: 170px;
        margin: 20px;
        border: 1px solid #00FF7F;
        background-color: #fff;
        position: relative;
        overflow: hidden;
        border-radius: 3px;
    }
    
    .wrapper:after,
    .wrapper:before {
        content: '';
        position: absolute;
        width: 240px;
        height: 240px;
        top: 50%;
        left: 50%;
        animation: active 8s linear infinite;
        transform-origin: 0 0;
    }
    
    .wrapper:after {
        background: linear-gradient(to left, #00FF7F, #fff);
    }
    
    .wrapper:before {
        animation-delay: -4s;
        background: linear-gradient(to left, #fff, #00FF7F);
    }
    
    @keyframes active {
        from {
            transform: rotate(0deg)
        }
        to {
            transform: rotate(360deg)
        }
    }
    
    .main,
    .content {
        position: absolute;
        width: 150px;
        height: 150px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        border: 1px solid #ececec;
        background: #fff;
        z-index: 10;
    }
    
    .main:after,
    .main:before {
        content: '';
        position: absolute;
        width: 240px;
        height: 240px;
        top: 50%;
        left: 50%;
        animation: activeMain 8s linear infinite;
        transform-origin: 0 0;
        z-index: -1;
    }
    
    .main:after {
        background: linear-gradient(to left, #3CB371, #fff);
    }
    
    .main:before {
        background: linear-gradient(to left, #fff, #20B2AA);
        animation-delay: -4s;
    }
    
    @keyframes activeMain {
        from {
            transform: rotate(90deg)
        }
        to {
            transform: rotate(450deg)
        }
    }
</style>

<body>
    <div class="wrapper">
        <div class="main"></div>
        <div class="content"></div>
    </div>
</body>

</html>