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

Oria ·

更新时间:2024-09-20

· 766 次阅读

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

1024 个赞