利⽤css和svg实现波浪效果利⽤css和svg实现波浪效果
要实现类似与波浪的效果图可以有两种⽅法：
1.使⽤svg和css的结合
⾸先需要⽤AI或者其他⼯具画⼀个波浪的形状，例如如下svg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.svg-big-wrapper {
width: 150px;
height: 80px;
margin: 0 auto;
position: absolute;
}
.svg-big-wrapper>div {
width: 150px;
height: 80px;
overflow: hidden;
display: block;
margin: 0 auto;
position: absolute;
}
.wave-big-svg-shape {
position: absolute;
top: 0;
left: 0;
width: 450px;
height: 100%;
overflow: hidden;
transform: translateX(0px);
}
.wavenoup-big-svg-shape {
position: absolute;
top: 0;
left: 0;
width: 450px;
height: 100%;
overflow: hidden;
transform: translateX(0px);
transform: translateY(50px);
}
.wavenoup-big-svg-shape .wave-big-svg {
width: 100%;
height: auto;
overflow: hidden;
float: left;
fill: #00A1DF;
margin: 0;
animation: waveBigSvgAnim 6s linear infinite;
}
.wave-big-svg-shape .wave-big-svg {
width: 100%;
height: auto;
overflow: hidden;
float: left;
float: left;
fill: #00A1DF;
margin: 0;
animation: waveBigSvgAnim 6s linear infinite;
}
@keyframes waveBigSvgAnim {
0% {
svg图transform: translateX(calc(-150px * 2));
}
100% {
transform: translateX(0);
}
}
</style>
</head>
<body>
<div class="svg-big-wrapper" id="svg-wrapper01">
<div>
<div class="wave-big-svg-shape">
<svg version="1.1" id="water-svg-01" class="wave-big-svg" xmlns="/2000/svg" xmlns:xlink="/1999/xlink" x="0px" y= "0px"
viewBox="0 0 450 80" xml:space="preserve">
<path fill="#00C9FF" d="M450,80H0V0c9.7,4,18.5,11.9,29,12C40.1,12.1,49.1,0.4,60.2,0C70.6-0.4,79.6,8.9,90,9c11.2,0.1,21.3-9.4,32.5-9
c11.1,0.4,20.4,11.6,31.5,11c8.5-0.5,14.4-10.7,22.9-11c9.7-0.3,17.4,11.6,27.1,11c7.6-0.4,12.5-10.4,20.2-11
c13.4-1,24.5,15.8,37.8,14c8-1.1,11.7-13,19.7-14c10.8-1.3,19.4,12.3,30.3,12c9.4-0.3,16.1-11.3,25.5-12c11.3-0.8,21.2,10.1,32.5,10
c11-0.1,20.5-10.6,31.4-10c9.7,0.6,16.9,12.4,26.6,12c8.3-0.3,14.7-8,22-12V80z"/>
</svg>
</div>
</div>
</div>
</body>
</html>
让svg做左右移动的动画，就可以实现波浪左右流动的效果，再通过transformX可以实现上下⾼度的变化，以上有些地⽅没处理好，实际需注意
效果图如下所⽰：
2. 单纯利⽤svg的遮罩实现
⽅法⼆全部都是svg图，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.irrigate-svg {
height: 245px;
width: 245px;
margin: 0 auto;
margin-top: 27px;
}
.
masked {
-webkit-mask: url(#myMask);
mask: url(#myMask);
}
#irrigate-wrap {
transform: translateY(112px);
}
.irrigate-svg {
.irrigate-svg {
overflow: hidden;
}
.
irrigate-rate {
animation: wavingleft 6s linear infinite;
}
.irrigate-rate:last-child {
animation: wavingright 6s linear infinite;
}
@keyframes wavingleft {
0% {
transform: translateX(-239px);
}
50% {
transform: translateX(0px);
}
100% {
transform: translateX(-239px);
}
}
@keyframes wavingright {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(-239px);
}
100% {
transform: translateX(0px);
}
}
</style>
</head>
<body>
<div class="irrigate-svg">
<svg version="1.1" id="图层_5" xmlns="/2000/svg" xmlns:xlink="/1999/xlink" x="0px" y="0px"
viewBox="0 0 244.2 244.2" xml:space="preserve">
<title>灌溉率</title>
<defs>
<mask id="myMask">
<circle cx="122.1" cy="122.1" r="114.6"/>
</mask>
</defs>
<g class="masked">
<g id="irrigate-wrap">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1120.8899" y1="262.1278" x2="1120.8899" y2="1.81" gradientTransform=" matrix(-1 0 0 -1 1430.8899 246)">
<stop  offset="0" />
<stop  offset="1" />
</linearGradient>
<path class="irrigate-rate" d="M0-3.8c0,0,44.7-14.3,77-12.1c32.9,2.3,95.6,33.3,128.3,31.1c38.9-2.6,116.7-33.7,153-29. 7
c22.9,2.5,73,20.4,95.7,24.4c30.9,5.5,64.2,8.4,90.3,6.8C567.8,15.2,620-3.8,620-3.8v248H0V-3.8z"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="2348.3101" y1="262.1278" x2="2348.3101" y2="1.81" gradientTransform=" matrix(1 0 0 -1 -2038.3101 246)">
<stop  offset="0" />
<stop  offset="1" />
</linearGradient>
<path class="irrigate-rate" d="M620-3.8c0,0-44.7-14.3-77-12.1c-32.9,2.3-95.6,33.3-128.3,31.1
c-38.9-2.6-116.7-33.7-153-29.7c-22.9,2.5-73,20.4-95.7,24.4c-30.9,5.5-64.2,8.4-90.3,6.8C52.2,15.2,0-3.8,0-3.8v248h620V-3.8z"/>
</g>
</g>
<g>
<g id="图层_5-2">
<circle cx="122.1" cy="122.1" r="114.6"/>
<text transform="matrix(1 0 0 1 38.09 152.96)" >当前⼟壤灌溉率</text>
<text transform="matrix(1 0 0 1 82.44 106.96)" >80%</text>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="0" y1="123.91" x2="244.18" y2="123.91" gradientTransform="matrix(1 0 0 -1 0 246)">
<stop  offset="0" />
<stop  offset="1" />
</linearGradient>
<circle cx="122.1" cy="122.1" r="114.6"/>
</g>
</g>
</svg>
</div>
</body>
</html>
主要的关键在于，svg的遮罩mask，可以参考
效果图如下所⽰：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。