CSS或SVG中的波浪 [英] Waves in CSS or SVG
问题描述
我正在尝试使用 CSS 创建软波,但遇到了一些麻烦.我现在正在使用border-radius来创建波浪,但它看起来更像是云.我试过使用transform: translateZ(180deg);
,但是div
颜色却颠倒了.
I'm trying to create soft waves with CSS and am having some trouble. I'm using border-radius right now to create waves but it looks more like clouds. I tried using transform: translateZ(180deg);
but the div
color is then upside down.
这就是我想要的:
这是我所拥有的:
.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 MDN上的路径.在以下示例中,我将两个路径元素与二次贝塞尔曲线一起使用弯曲以产生波浪:
I would suggest using an inline handcoded SVG. Your shapes are pretty simple an making the waves with the SVG <path>
element is easy.
All you need to know about the SVG path on MDN. In the following example, I used two path elements with quadratic bezier curves to make the waves :
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>
这篇关于CSS或SVG中的波浪的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!