CSS如何實現(xiàn)波動水球效果

發(fā)布時間：2021-03-18 11:31:34 來源：億速云閱讀：192 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細講解有關(guān)CSS如何實現(xiàn)波動水球效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

今天學習到了一個新的css特效，波動水球效果，也是非常的好看

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);
    }
}

關(guān)于“CSS如何實現(xiàn)波動水球效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

向AI問一下細節(jié)

CSS如何實現(xiàn)波動水球效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽