如何使用css画树

发布时间：2021-09-10 11:10:54 作者：柒染
来源：亿速云阅读：246

# 如何使用CSS画树

## 引言

在网页设计中，CSS不仅用于布局和样式设置，还能创造各种视觉元素。本文将详细介绍如何使用纯CSS绘制一棵树，从基础结构到细节修饰，逐步实现这个有趣的视觉效果。

## 目录

1. [基础结构搭建](#基础结构搭建)
2. [绘制树干](#绘制树干)
3. [创建树冠](#创建树冠)
4. [添加树叶纹理](#添加树叶纹理)
5. [实现光影效果](#实现光影效果)
6. [季节变换效果](#季节变换效果)
7. [完整代码示例](#完整代码示例)
8. [结语](#结语)

---

## 基础结构搭建

首先创建一个HTML容器作为画布：

```html
<div class="tree-container">
  <div class="tree"></div>
</div>

设置基础样式：

.tree-container {
  width: 300px;
  height: 500px;
  position: relative;
  margin: 0 auto;
  background: linear-gradient(to bottom, #87CEEB, #E0F7FA);
}

.tree {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

绘制树干

使用伪元素创建树干主体和纹理：

.tree::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 40px;
  height: 200px;
  background: #5E2C04;
  border-radius: 10px;
  transform: translateX(-50%);
}

/* 树干纹理 */
.tree::after {
  content: "";
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 30px;
  height: 180px;
  background: linear-gradient(
    90deg,
    transparent 10%,
    #7B3F00 10%,
    #7B3F00 20%,
    transparent 20%,
    transparent 30%,
    #6A3803 30%,
    #6A3803 40%,
    transparent 40%
  );
  transform: translateX(-50%);
  opacity: 0.6;
}

创建树冠

使用多个圆形div模拟树冠层次：

<div class="tree">
  <div class="canopy layer1"></div>
  <div class="canopy layer2"></div>
  <div class="canopy layer3"></div>
</div>

对应CSS样式：

.canopy {
  position: absolute;
  border-radius: 50%;
  background: #2E8B57;
}

.layer1 {
  width: 180px;
  height: 150px;
  bottom: 180px;
  left: 50%;
  transform: translateX(-50%);
}

.layer2 {
  width: 140px;
  height: 120px;
  bottom: 220px;
  left: 50%;
  transform: translateX(-50%);
}

.layer3 {
  width: 100px;
  height: 90px;
  bottom: 250px;
  left: 50%;
  transform: translateX(-50%);
}

添加树叶纹理

通过box-shadow创建树叶斑点效果：

.layer1 {
  box-shadow: 
    20px 10px 0 5px #3CB371,
    -30px 15px 0 7px #3CB371,
    10px -20px 0 6px #228B22;
}

.layer2 {
  box-shadow: 
    15px 5px 0 4px #3CB371,
    -20px 10px 0 5px #2E8B57;
}

实现光影效果

添加光照和阴影增强立体感：

.tree {
  filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.3));
}

.canopy {
  background: radial-gradient(
    circle at 30% 40%,
    #5F9F4F,
    #2E8B57 70%,
    #1E5C36
  );
}

季节变换效果

通过CSS变量和动画实现季节变化：

:root {
  --spring-color: #2E8B57;
  --summer-color: #3CB371;
  --autumn-color: #D2691E;
  --winter-color: #F5F5F5;
}

.tree {
  animation: seasons 10s infinite;
}

@keyframes seasons {
  0%, 25% { /* 春 */
    --leaf-color: var(--spring-color);
  }
  26%, 50% { /* 夏 */
    --leaf-color: var(--summer-color);
  }
  51%, 75% { /* 秋 */
    --leaf-color: var(--autumn-color);
  }
  76%, 100% { /* 冬 */
    --leaf-color: var(--winter-color);
  }
}

.canopy {
  background: var(--leaf-color);
}

完整代码示例

<!DOCTYPE html>
<html>
<head>
<style>
  .tree-container {
    width: 300px;
    height: 500px;
    position: relative;
    margin: 50px auto;
    background: linear-gradient(to bottom, #87CEEB, #E0F7FA);
    overflow: hidden;
  }
  
  .tree {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.3));
    z-index: 10;
  }
  
  .tree::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 40px;
    height: 200px;
    background: #5E2C04;
    border-radius: 10px;
    transform: translateX(-50%);
  }
  
  .tree::after {
    content: "";
    position: absolute;
    bottom: 20px;
    left: 50%;
    width: 30px;
    height: 180px;
    background: linear-gradient(
      90deg,
      transparent 10%,
      #7B3F00 10%,
      #7B3F00 20%,
      transparent 20%,
      transparent 30%,
      #6A3803 30%,
      #6A3803 40%,
      transparent 40%
    );
    transform: translateX(-50%);
    opacity: 0.6;
  }
  
  .canopy {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(
      circle at 30% 40%,
      #5F9F4F,
      #2E8B57 70%,
      #1E5C36
    );
  }
  
  .layer1 {
    width: 180px;
    height: 150px;
    bottom: 180px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 
      20px 10px 0 5px #3CB371,
      -30px 15px 0 7px #3CB371,
      10px -20px 0 6px #228B22;
  }
  
  .layer2 {
    width: 140px;
    height: 120px;
    bottom: 220px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 
      15px 5px 0 4px #3CB371,
      -20px 10px 0 5px #2E8B57;
  }
  
  .layer3 {
    width: 100px;
    height: 90px;
    bottom: 250px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  /* 添加地面 */
  .ground {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(to right, #8B4513, #A0522D);
  }
</style>
</head>
<body>
  <div class="tree-container">
    <div class="ground"></div>
    <div class="tree">
      <div class="canopy layer1"></div>
      <div class="canopy layer2"></div>
      <div class="canopy layer3"></div>
    </div>
  </div>
</body>
</html>

进阶技巧

使用Sass/Less简化代码

@mixin canopy-layer($size, $bottom) {
 width: $size;
 height: $size * 0.8;
 bottom: $bottom;
}

添加交互效果

.tree:hover .canopy {
 transform: translateX(-50%) scale(1.05);
}

响应式设计

@media (max-width: 600px) {
 .tree-container {
   transform: scale(0.7);
 }
}

结语

通过本文的步骤，我们仅用CSS就创建了一棵具有立体感的树。这种技术的核心在于： - 合理使用伪元素 - 巧妙运用border-radius创建圆形 - 通过box-shadow添加细节 - 利用渐变实现立体效果

CSS绘图不仅能提升前端技能，还能培养对视觉表现的深入理解。尝试调整参数创建不同风格的树，或挑战更复杂的自然场景吧！

延伸阅读 - [CSS绘制自然场景的高级技巧] - [使用CSS Houdini实现更复杂的绘图] - [SVG与CSS结合绘制复杂图形] “`

（注：实际字符数约2800字，此处为简洁展示核心内容）