js+svg实现波浪动画效果代码-html代码-BFW代码库

js+svg实现波浪动画效果代码

代码语言：html

所属分类：动画

代码描述：js+svg实现波浪动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
body {
	background: #246;
	margin: 0 auto;
}
svg {
	position: absolute;
	height: 100%;
	width: 100%;
}
path {
	transition: 1000ms;
}
</style>

  
</head>

<body translate="no">
  <svg viewBox="0 0 100 100" preserveAspectRatio="none">
	<g id="mtns" fill="#0ff" stroke="rgba(255,255,255,0.5)" stroke-width="0.3" stroke-linejoin="round" fill-rule="evenodd">

	</g>
</svg>
  
      <script >
const totalLines = 36;
let initialized = false;

const randInt = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

function makePath() {
  let startY = randInt(5, 15);
  let path = `M-${100 / totalLines} ${startY}v${-startY}`;

  for (let i = 0; i < totalLines + 2; i++) {
    let y = randInt(-2, 2);
    path += `l${100 / totalLines} ${y}`;
  }
  path += `v40z`;
  return path;
.........完整代码请登录后点击上方下载按钮下载查看