zdog实现小船在水中巡航动画效果代码-html代码-BFW代码库

zdog实现小船在水中巡航动画效果代码

代码语言：html

所属分类：动画

代码描述：zdog实现小船在水中巡航动画效果代码

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

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

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

  
  
<style>
body {
	margin: 0;
	min-block-size: 100svb;
	display: grid;
	place-items: center;
	color: hsl(217 57% 45%);
	background: hsl(217 57% 40%);
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200">\
    <pattern id="p" patternUnits="userSpaceOnUse" width="50" height="10" viewBox="0 0 50 10">\
        <path id="s" fill="none" stroke="hsl(217 60% 38%)" stroke-width="1" d="M 0 2.5 C 7.5 2.5 17.5 -2.5 25 -2.5 C 32.5 -2.5 42.5 2.5 50 2.5" />\
        <use href="%23s" y="5" />\
        <use href="%23s" y="10" />\
    </pattern>\
    <rect width="400" height="200" fill="url(%23p)" />\
</svg>');
}

canvas {
	display: block;
	inline-size: 100%;
	max-inline-size: 400px;
}
</style>

</head>

<body translate="no">
  <canvas width="400" height="400"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zdog.dist.js"></script>
      <script  >
const { Anchor, Shape, Ellipse, RoundedRect, TAU, easeInOut } = Zdog;

(() => {
  const stroke = 0.2;
  const offsets = [1, 2, 3];
  const depth = 10;
  const z = depth * -1;

  const cruiserOffset = -5;
  const cruiserAngle = TAU / 30;

  const streamsOffse.........完整代码请登录后点击上方下载按钮下载查看