css+html粒子生长树

你想要实现一个 CSS+HTML 粒子生长树，这需要用到 CSS3 的动画和一些基本的 HTML 元素。

首先，你需要创建一个 HTML 文件，并在其中添加一个 div 元素，作为树的主干。然后，使用 CSS 设置该 div 的样式，使其呈现出树的形状。

接下来，你可以使用 JavaScript 在主干上添加分支。你可以使用 canvas 或 SVG 实现这个效果。在添加分支时，你需要使用 CSS3 动画为它们添加生长效果。

最后，你可以使用 CSS3 动画为整个树添加一个生长效果，使它看起来更加自然和生动。

以下是一个简单的示例代码：

HTML:

<div id="tree"></div>

CSS:

#tree {
  width: 10px;
  height: 200px;
  background-color: brown;
  position: relative;
  margin: 50px auto;
  border-radius: 5px;
}

.branch {
  width: 2px;
  height: 50px;
  background-color: green;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform-origin: bottom;
  animation: grow 1s forwards;
}

@keyframes grow {
  from {
    height: 0;
    transform: scaleY(0);
  }
  to {
    height: 50px;
    transform: scaleY(1);
  }
}

JavaScript:

const tree = document.getElementById('tree');

function addBranch(parent, angle) {
  const branch = document.createElement('div');
  branch.classList.add('branch');
  branch.style.transform = `rotate(${angle}deg) translate(-50%, -100%)`;
  parent.appendChild(branch);

  if (Math.random() > 0.5) {
    addBranch(branch, angle + Math.random() * 30 + 10);
  }
  if (Math.random() > 0.5) {
    addBranch(branch, angle - Math.random() * 30 - 10);
  }
}

addBranch(tree, 0);

这段代码将在页面中创建一个树，其中主干为一个高度为 200px，宽度为 10px 的 div 元素。然后，使用 JavaScript 添加了两个分支。每个分支都是一个高度为 50px，宽度为 2px 的 div 元素，并使用 CSS3 动画为其添加了生长效果。最后，使用 CSS3 动画为整个树添加了一个生长效果。