时间戳

首页 > 解决方案 > CSS - 登陆页面图像上的波浪边框，不仅仅是波浪

html - CSS - 登陆页面图像上的波浪边框，不仅仅是波浪

问题描述

我有一个来自 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 -->

但这是一个与我的着陆页图像重叠的单独波浪我希望我的着陆页图像的边框是这样的波浪：

https://patcs.com/

标签： htmlcss

解决方案

您可以将 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>

推荐阅读