console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{margin:0;padding:0;}
    body{ background-color: #522350 }
    .water {  
        position: relative;  
        width: 600px;  
        height: 600px;  
        background-color: rgb(118, 218, 255);  
        /* border-radius: 50%;  */
        overflow: hidden;
    }  
    .water:before,.water:after{  
           content: "";  
           position: absolute;  
           width: 120%;  
           height: 120%;  
           top: 50%;  
           left: 50%;  
           background-color: rgba(255, 255, 255, .4); 
           border-radius: 45%;  
           transform: translate(-50%, -70%) rotate(0);  
           animation: rotate 6s linear infinite;  
           z-index: 10;  
    }  
           
    .water:after {  
           border-radius: 47%;  
           background-color: rgba(255, 255, 255, .9);  
           transform: translate(-50%, -70%) rotate(0);  
           animation: rotate 10s linear -5s infinite;  
           z-index: 20;  
    }  
      
    @keyframes rotate {  
        50% {  
            transform: translate(-50%, -70%) rotate(180deg);  
        } 
        100% {  
            transform: translate(-50%, -70%) rotate(360deg);  
        }  
    }  
 
    </style>
</head>

<body>
    <div class="water" width=''></div>  
</body>

</html>