儿童画以简洁的线条和优雅的色块完成每一幅画作，是人类文艺智慧的杰出代表。本文，我们通过CSS+HTML来模拟一幅儿童画作，我们将画一棵树。分三步走：

步骤一：树干+顶部圆果，一个div元素+::before伪元素便可完成。我们先来完成这一部分。翠花，上酸菜！——哦不不，上代码：

/* css */
.trunk {
	position: relative;
	width: 4px;
	height: 200px;
	background: linear-gradient(to top, black, tan, gray, tan);
}

.trunk::before {
	position: absolute;
	content: '';
	width: 30px;
	height: 30px;
	background: radial-gradient(orange,darkred);
	border-radius: 50%;
	left: calc(50% - 15px);
	top: -30px;
}

<!-- html -->
<div class="trunk"></div>

代码整体没有什么难度，树干是 4*200 的尺寸，背景使用线性渐变修饰；伪元素尺寸 30*30，圆形，用径向渐变假装成水果的样纸，然后定位使之结在树干的最顶端之上。效果如下：

步骤二：画叶子。使用三个div元素做 trunk 的子元素，利用每一个div的两个伪元素做两片叶子：

/* css */
.leaf { position: absolute; --angle: 45deg; }
.leaf::before, .leaf::after {
	position: absolute;
	content: '';
	left: -10px;
	width: 20px;
	height: 40px;
	border-radius: 50% 100%;
	transform-origin: 50% 100%;
	background: linear-gradient(80deg,lightgreen,green,lightgreen);
	transform: rotate(var(--angle));
}
.leaf::after { --angle: -45deg; }
.leaf:nth-of-type(2) { top: 20%; }
.leaf:nth-of-type(3) { top: 50%; }

<!-- html -->
<div class="trunk">
	<div class="leaf"></div>
	<div class="leaf"></div>
	<div class="leaf"></div>
</div>

树叶代码中，.leaf选择器相对简单，绝对定位、尺寸为 0*0（绝对定位元素不设置大小就是没有大小）、带一个CSS变量 --angle 用来作规范伪元素的旋转角度。两个伪元素做绝对定位、运动原点设在底部中央，便于精准安排位置。第二、三张叶子单独设置 top 属性。效果如下：

步骤三：让树摇曳。这个相对简单吧，设置一个CSS关键帧动画，然后在 .trunk（树干）选择器加入 animation 属性：

/* .leaf 选择器 animation 属性 */
.trunk {
	/* 这里是其他代码 */
	animation: swear 3s infinite alternate;
}

/* 关键帧动画 */
@keyframes swear {
	from { transform: skew(3deg); }
	to { transform: skew(-3deg); }
}

最终效果：