CSS如何实现波动水球效果

这篇文章将为大家详细讲解有关CSS如何实现波动水球效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联是一家集网站建设,綦江企业网站建设,綦江品牌网站建设,网站定制,綦江网站建设报价,网络营销,网络优化,綦江网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

今天学习到了一个新的css特效，波动水球效果，也是非常的好看

HTML：




    
    
    Document

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如何实现波动水球效果
网页URL：http://cqcxhl.com/article/pgoscc.html

重庆分公司，新征程启航

CSS如何实现波动水球效果

其他资讯