css3做波浪效果

CSS3能够为网页设计师带来许多惊人的效果，比如具有例外外观的背景，这样会使网站更加吸引人，并向访问者展示这是一个经过精心设计的网站。波浪效果是用CSS3非常容易实现的一个效果，让你的网站从平凡中脱颖而出。下面我们来看看如何使用CSS3实现波浪效果吧。

.wave {
        position: relative;
        height: 150px;
        width: 100%;
        background-color: #2e3192;
}
.wave::before,.wave::after {
        content: '';
        display: block;
        position: absolute;
        border-radius: 100%;
}
.wave::before {
        height: 300px;
        width: 300px;
        top: -60%;
        left: -50%;
        transform: translate(-50%);
        background-color: #71c9ce;
        opacity: 0.4;
}
.wave::after {
        height: 400px;
        width: 400px;
        top: -90%;
        left: -10%;
        transform: translate(-50%);
        background-color: #71c9ce;
        opacity: 0.6;
}
    

在上面的代码中，我们用到了一个名为.wave的DIV容器来放置波浪。我们给这个容器设定了高度和宽度，这取决于你想要的波浪大小和你需要使用的页面尺寸。在容器中，我们创建了两个带有波浪效果的伪元素。

在"::before"的元素中，我们设置了高度和宽度为300px，然后为它们在容器的顶部和中心的50％水平线上设置了位置。我们将它的背景色设置为一个浅蓝色，并给它一个透明度，以使其与容器上面的背景色混合。

在"::after"的元素中，我们设置了高度和宽度为400px，然后将它定位到容器的顶部和中心的10％水平线上。我们将它的背景色设置成了和上面一样的浅蓝色。这里的透明度更高，因此它会更加突出地显示在顶部。

这就是我们的CSS3波浪效果完成了。你可以根据自己的需要对代码进行调整，比如更改背景颜色、高度和宽度，以实现您想要的效果。我希望这篇文章能够帮助你学习如何使用CSS3创建波浪效果，让你的网站更加美观和吸引人。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！