利用css和svg实现波浪效果

最新推荐文章于 2024-06-05 10:26:53 发布

wallowyou

最新推荐文章于 2024-06-05 10:26:53 发布

阅读量2k

点赞数

分类专栏：前端css

本文链接：https://blog.csdn.net/wallowyou/article/details/88046474

版权

前端css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

利用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;
 fill: #00A1DF;
 margin: 0;
 animation: waveBigSvgAnim 6s linear infinite;
}
@keyframes waveBigSvgAnim {
 0% {
   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="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 450 80" style="enable-background:new 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 {
  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="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 244.2 244.2" style="enable-background:new 0 0 244.2 244.2;" xml:space="preserve">
      <title>灌溉率</title>
      <defs>
        <mask id="myMask">
          <circle style="fill:#fff;stroke:#fff;stroke-miterlimit:10;" 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" style="stop-color:#A13AF6;stop-opacity:0.8"/>
            <stop  offset="1" style="stop-color:#00FFFF;stop-opacity:0.7"/>
          </linearGradient>
          <path class="irrigate-rate" style="fill:url(#SVGID_1_);" 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" style="stop-color:#A13AF6;stop-opacity:0.8"/>
            <stop  offset="1" style="stop-color:#00FFFF;stop-opacity:0.7"/>
          </linearGradient>
          <path class="irrigate-rate" style="fill:url(#SVGID_2_);" 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 style="fill:none;stroke:#25437C;stroke-width:15;stroke-miterlimit:10;" cx="122.1" cy="122.1" r="114.6"/>
          <text transform="matrix(1 0 0 1 38.09 152.96)" style="fill:#00FFFF; font-family:'FZLTKHK--GBK1-0'; font-size:24px;">当前土壤灌溉率</text>
          <text transform="matrix(1 0 0 1 82.44 106.96)" style="fill:#00FFFF; font-family:'FZLTKHK--GBK1-0'; font-size:36px;">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" style="stop-color:#A13AF6"/>
            <stop  offset="1" style="stop-color:#00FFFF"/>
          </linearGradient>
          <circle style="fill:none;stroke:url(#SVGID_3_);stroke-width:15;stroke-linecap:round;stroke-miterlimit:10;" cx="122.1" cy="122.1" r="114.6"/>
        </g>
      </g>       
  </svg>
</div>
</body>
</html>

主要的关键在于，svg的遮罩mask，可以参考张鑫旭

效果图如下所示：

wallowyou

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用css和svg实现波浪效果

利用css和svg实现波浪效果要实现类似与波浪的效果图可以有两种方法：1.使用svg和css的结合首先需要用AI或者其他工具画一个波浪的形状,例如如下svg：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport
复制链接

扫一扫