纯CSS实现波动水球效果

曾经终败给现在 2021-07-26 20:20 678阅读 0赞

今天学习到了一个新的css特效，波动水球效果，也是非常的好看，而且触类旁通，手机充电，被子里水的特效也都可以制作。  
![在这里插入图片描述][20200509181614130.gif]  
HTML：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="css/水球效果.css">
    </head>
    <body>
        <div class="main">
            <div class="wave">
                
            </div>
        </div>
    </body>
    </html>

css：

*{
        margin: 0;
        padding: 0;
    }
    body{
        height: 100vh;
        background: linear-gradient(rgb(95,95,250)10%,rgb(3,3,110));
    
    }
    .main,.wave{
        width: 200px;
        height: 200px;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    
    
    }
    .main{
        
        border:3px solid darkturquoise;
        
        padding: 10px;
    }
    .wave{
         
        background: darkturquoise;
        overflow: hidden;
        
    }
    .wave:after{
        content: "";
        width: 300px;
        height: 300px;
        background: rgba(255, 255, 255, 0.8);
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%,-60%);
        border-radius: 40%;
        animation: wave 5s linear infinite;
    
    }
    .wave::before{
        content:"waterball" ;
        position: absolute;
        left: 50%;
        top: 0;
        color: darkturquoise;
        z-index: 99;
        transform: translate(-50%,30px);
    
    }
    @keyframes wave{
        100%{
            transform: translate(-50%,-60%) rotate(360deg);
        }
    }

还是挺简单的，喜欢的可以一起交流。

[20200509181614130.gif]: /images/20210726/bbffb8dd4169479cb3d052b5fd73daa8.png