css3-水波浪球起伏效果

正在修炼web的小芮

于 2022-07-27 15:19:51 发布

阅读量371

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/m0_71814235/article/details/126015522

版权

这篇博客介绍了如何使用CSS3创建具有水波浪球起伏效果的视觉特效。通过设置body样式和特定的CSS规则，作者详细阐述了实现这一动态效果的步骤和关键技巧。

摘要由CSDN通过智能技术生成

body样式

<body>
    <section class="circle">
            <span class="wave"></span>
    </section>
</body>

css样式

    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            display: grid;
            justify-content: center;
            align-content: center;
            background-color: #fff;
        }
        .circle{
            width: 150px;
            height: 150px;
            border: 5px solid #fff;
            box-shadow: 0 0 0 5px #4973ff;
            border-radius: 50%;
        }
        .circle .wave{
            display: block;
            width: 100%;
            height: 100%;
            background-color: #4976ff;
            border-radius: 50%;
            box-shadow: inset 0 0 50px rgba(0,0,0,0.5);