CSS - 着陆页图像上的波浪边框，而不仅仅是波浪
发布于2023-03-22 11:19 阅读(1156) 评论(0) 点赞(22) 收藏(2)
我有一个来自 getwaves.io 的用于我的 wave 的 SVG。
现在我对这段代码产生了兴趣：
.wave {
position: absolute;
opacity: 0.2;
}
<div class="topbanner">
<h1 align="center">I Help Counsellors<br><span class="get-clients">Get Clients</span></h1>
<div class="row">
<div class="col-md-6 col-md-offset-3" id="result" align="center"></div>
<svg class="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#5000ca" fill-opacity="1" d="M0,256L48,229.3C96,203,192,149,288,154.7C384,160,480,224,576,218.7C672,213,768,139,864,128C960,117,1056,171,1152,197.3C1248,224,1344,224,1392,224L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg>
</div>
</div> <!-- End topbanner -->
但它是一个单独的波浪，与我的着陆页图像重叠我希望我的着陆页图像的边框是这样的波浪：
解决方案
您可以将 svg 用作该部分的背景图像，并使用 css 调整其位置和大小。喜欢这里https://codepen.io/venkateshpataballa/pen/MzXZqz但没有动画。
body
{
overflow-x:hidden;
}
.ocean {
background: #3b21ff;
height: 10%;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
}
.wave {
background: url(https://venkat369.github.io/development/wave.svg) repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 198px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
transform: translate3d(0, 0, 0);
}
.wave:nth-of-type(2) {
top: -175px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
opacity: 1;
}
@keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
@keyframes swell {
0%, 100% {
transform: translate3d(0,-25px,0);
}
50% {
transform: translate3d(0,5px,0);
}
}<div class="container-fliud">
<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
</div>
</div>所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/511879/90c7bf10056f1e37a533/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力