vue实现树木生长过程效果-html代码-BFW代码库

vue实现树木生长过程效果

代码语言：html

所属分类：动画

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}
canvas {
  width: 100%;
  height: 100%;
}
#app {
  padding: 1rem;
  display: none;
  background: rgba(0,0,0,0.5);
}
#toggle-label {
  position: fixed;
  top: 0;
  left: 0;
  font-size: 2rem;
}
#toggle {
  width: 0;
  height: 0;
  display: none;
}
#toggle:checked ~ #app {
  display: block;
  position: fixed;
  top: 2rem;
}
</style>

</head>
<body translate="no">
<canvas></canvas>
<label id="toggle-label" for="toggle">☰</label>
<input id="toggle" type="checkbox" />
<form id="app">
<div class="form-group">
<label for="seed">Semilla</label>
<input id="seed" type="number" min="0" v-model="seed" />
</div>
<div class="form-group">
<label for="generations">Generaciones</label>
<input id="generations" type="number" min="3" max="10" v-model="maxGenerations" />
</div>
<div class="form-group">
<label for="steps">Pasos</label>
<input id="steps" type="number" min="3" max="10" v-model="maxSteps" />
</div>
<div class="form-group">
<input id="length-x-generation" type="checkbox" v-model="lengthByGeneration" />
<label for="length-generation">¿Cambia la longitud con la generación?</label>
</div>
<fieldset>
<legend>Ramas</legend>
<div class="form-group">
<label for="branches-min">Ramas por rama (mínimo)</label>
<input type="number" min="1" :max="branchesMax" v-model="branchesMin" />
</div>
<div class="form-group">
<label for="branches-max">Ramas por rama (máximo)</label>
<input type="number" :min="branchesMin" max="10" v-model="branchesMax" />
</div>
<fieldset v-if="lengthByGeneration">
<legend>Longitud por generación</legend>
<div class="fo.........完整代码请登录后点击上方下载按钮下载查看