(SVG + CSS)波浪模式

下载代码

html

css

js

分享到微信朋友圈

X

html

<svg viewBox="0 0 200 200">
  <defs>
    <pattern id="patt1" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse">
      <path d="M0,7.5C12.9,7.5 17.1,22.5 30,22.5C42.9,22.5 47.1,7.5 60,7.5" stroke="#f00" stroke-width="1" fill="transparent"></path>
    </pattern>
    <pattern id="patt2" x="30" y="15" width="60" height="60" patternUnits="userSpaceOnUse">
      <path d="M0,7.5C12.9,7.5 17.1,22.5 30,22.5C42.9,22.5 47.1,7.5 60,7.5" stroke="#00f" stroke-width="1" fill="transparent"></path>
    </pattern>
    <pattern id="patt3" x="0" y="30" width="60" height="60" patternUnits="userSpaceOnUse">
      <path d="M0,7.5C12.9,7.5 17.1,22.5 30,22.5C42.9,22.5 47.1,7.5 60,7.5" stroke="#0f0" stroke-width="1" fill="transparent"></path>
    </pattern>
    <pattern id="patt4" x="30" y="45" width="60" height="60" patternUnits="userSpaceOnUse">
      <path d="M0,7.5C12.9,7.5 17.1,22.5 30,22.5C42.9,22.5 47.1,7.5 60,7.5" stroke="#fc0" stroke-width="1" fill="transparent"></path>
    </pattern>
    <linearGradient id="grad1" x1="0" x2="0.15" spreadMethod="repeat">
      <stop offset="0%" stop-color="white" stop-opacity="1"></stop>
      <stop offset="75%" stop-color="white" stop-opacity="0"></stop>
    </linearGradient>
    <linearGradient id="grad2" x1="0.5" x2="0.65" spreadMethod="repeat">
      <stop offset="0%" stop-color="white" stop-opacity="1"></stop>
      <stop offset="75%" stop-color="white" stop-opacity="0"></stop>
    </linearGradient>
  </defs>
  <mask id="mask1">
    <rect fill="url(#grad1)" width="400" height="200"></rect>
  </mask>
  <mask id="mask2">
    <rect fill="url(#grad2)" width="400" height="200"></rect>
  </mask>
  <rect id="squiggle1" mask="url(#mask1)" fill="url(#patt1)" width="200" height="200"></rect>
  <rect id="squiggle2" mask="url(#mask2)" fill="url(#patt2)" width="200" height="200"></rect>
  <rect id="squiggle3" mask="url(#mask1)" fill="url(#patt3)" width="200" height="200"></rect>
  <rect id="squiggle4" mask="url(#mask2)" fill="url(#patt4)" width="200" height="200"></rect>
</svg>

css

html, body {
  width: 100%;
  height: 100%;
}

body {
  background: #131518;
}

#patt1 path {
  stroke: #ff509e;
}

#patt2 path {
  stroke: #95d13c;
}

#patt3 path {
  stroke: #00b6cb;
}

#patt4 path {
  stroke: #9753e1;
}

#mask1 rect {
  -webkit-animation: pulse 1.90476s infinite;
          animation: pulse 1.90476s infinite;
  -webkit-animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
          animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

#mask2 rect {
  x: 10;
  -webkit-animation: pulse 1.90476s infinite 0.47619s;
          animation: pulse 1.90476s infinite 0.47619s;
  -webkit-animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
          animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

#squiggle1, #squiggle2, #squiggle3, #squiggle4 {
  background-blend-mode: multiply;
}

@-webkit-keyframes pulse {
  0% {
    x: 10;
  }
  50% {
    x: -20;
  }
  100% {
    x: -50;
  }
}

@keyframes pulse {
  0% {
    x: 10;
  }
  50% {
    x: -20;
  }
  100% {
    x: -50;
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg

<!doctype html> <html> <head> <meta charset="utf-8"> <title>(SVG + CSS)波浪模式-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号