使用css3绘制企业人员管理树形组织架构图特效

"```css /* 样式 */ .org-chart { width: 100%; display: flex; justify-content: center; }

.org-chart ul { list-style-type: none; margin: 0; padding: 0; }

.org-chart li { text-align: center; position: relative; }

.org-chart .connector { position: absolute; border-left: 1px solid #ccc; top: 50%; left: -10px; transform: translateY(-50%); }

.org-chart .connector::after { content: ''; height: 100%; width: 10px; background-color: #ccc; position: absolute; left: 0; }

.org-chart .node { border: 1px solid #ccc; border-radius: 5px; padding: 10px; margin: 10px; display: inline-block; }

.org-chart .node p { margin: 5px 0; }

.org-chart .node .sub-nodes { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); }

.org-chart .node:hover .sub-nodes { display: block; }

```html
<!-- HTML结构 -->
<div class=\"org-chart\">
  <ul>
    <li>
      <div class=\"connector\"></div>
      <div class=\"node\">
        <p>CEO</p>
        <div class=\"sub-nodes\">
          <ul>
            <li>
              <div class=\"connector\"></div>
              <div class=\"node\">
                <p>CFO</p>
              </div>
            </li>
            <li>
              <div class=\"connector\"></div>
              <div class=\"node\">
                <p>CTO</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
</div>
```"