纯css3实现思维导图样式

思维导图又称之为脑图

他大概是这个样子滴：

网上大部分实现有用d3.js实现，有手动用svg实现，最近工作需要，本人很懒，在琢磨看看用css3能不能实现呢？

答案是肯定的 下面上代码

html代码

<div class="mainBody" id="node1">
    <h1>node1</h1>
    <div class="oneBody">
        <div class="mainBody">
            <h1>node2</h1>
            <div class="oneBody">
                <div class="mainBody">
                    <h1>node3</h1>
                    <div class="oneBody">
                        <div class="mainBody">
                            <h1>node4</h1>
                        </div>
                        <div class="mainBody">
                            <h1>node4</h