css小树生长 |css span在div中垂直居中

.tree {
width: 20px;
height: 50px;
background-color: #884400;
position: relative;
}
.tree::before {
content: '';
position: absolute;
bottom: 50px;
left: -10px;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #007700;
}
.tree::after {
content: '';
position: absolute;
bottom: 0;
left: -14px;
width: 50px;
height: 50px;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
background-color: #884400;
}
// 小树长大了
.tree.grow {
animation: grow_tree 2s linear forwards;
}
@keyframes grow_tree {
from {
height: 50px;
width: 20px;
}
to {
height: 200px;
width: 80px;
}
}

大家首先定义了一个树的基本样式，包括树干和树叶。树干用矩形的形状，树叶用圆形的形状，通过伪元素`::before`和`::after`来实现。

接下来大家定义小树长大的动画效果，当加上`.grow`这个类名时，动画就会启动。大家使用了CSS的`animation`属性来定义动画，关键帧使用`@keyframes`规则来定义。在关键帧中，大家设置了起始状态和最终状态，然后使用`forwards`属性让他停留在最终状态。

现在，大家只需要在HTML中加上一段代码，就可以让小树开始生长了！

<div class="tree"></div>
<button onclick="document.querySelector('.tree').classList.add('grow')">Grow</button>

大家使用一个按钮来触发生长动画。当点击按钮时，大家会给这棵树加上`.grow`这个类名，让它开始生长。

现在，打开浏览器，看看你制作的小树已经慢慢长大了，生动有趣。CSS真是一个神奇的工具！