CSS实现波动水球效果的示例代码

今天学习到了一个新的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);    }}

到此这篇关于CSS实现波动水球效果的示例代码的文章就介绍到这了,更多相关css波动水球内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

CSS实现波动水球效果的示例代码