我正在尝试使用CSS创建软波并且遇到一些麻烦.我现在正在使用border-radius创建波浪,但它看起来更像云.我尝试使用transform：translateZ(180deg);但是div的颜色是颠倒的.
.wave1 {
left: 0%;
margin-left: -50px;
}
.wave2 {
margin-left: -69px;
}
.wave3 {
margin-left: -69px;
}
.wave4 {
margin-left: -69px;
}
.waves {
width: 200%;
clear: none;
z-index: 100;
position: absolute;
margin-top: 200px;
margin-left: -150px;
}
.waves div {
float: left;
width: 500px;
height: 100px;
border: solid 5px #000;
border-color: transparent;
border-radius: 70%/100px 100px 0 0;
background-color: #fff;
}
.bottom-half {
width: 100%;
height: 50%;
top: 70%;
position: absolute;
background-color: #fff;
}
.background-waves {
width: 200%;
clear: none;
z-index: 50;
position: absolute;
margin-top: 190px;
margin-left: 75px;
}
.bwave1 {
left: 0%;
margin-left: -50px;
}
.bwave2 {
margin-left: -69px;
}
.bwave3 {
margin-left: -69px;
}
.bwave4 {
margin-left: -69px;
}
.background-waves div {
float: left;
width: 500px;
height: 100px;
border: solid 5px #000;
border-color: transparent;
border-radius: 70%/100px 100px 0 0;
background-color: #fff;
opacity: 0.5;
}
<div class="waves"> <div class="wave1"></div> <div class="wave2"></div> <div class="wave3"></div> <div class="wave4"></div> <div class="wave5"></div> </div> <div class="background-waves"> <div class="bwave1"></div> <div class="bwave2"></div> <div class="bwave3"></div> <div class="bwave4"></div> <div class="bwave5"></div> </div>
解决方法
我建议使用内联手动编码的SVG.你的形状非常简单,用SVG< path>制作波浪.元素很简单.
所有你需要知道的关于 SVG path on MDN.在下面的例子中,我使用了两个路径元素和 quadratic bezier curves来制作波形：
所有你需要知道的关于 SVG path on MDN.在下面的例子中,我使用了两个路径元素和 quadratic bezier curves来制作波形：
svg{
background:url('https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg') no-repeat center center;
background-size:cover;
width:100%;
display:block;
}
<svg viewBox="0 0 100 25"> <path fill="#9EAFFD" opacity="0.5" d="M0 30 V15 Q30 3 60 15 V30z" /> <path fill="#9EAFFD" d="M0 30 V12 Q30 17 55 12 T100 11 V30z" /> </svg>
