純css3實現思維導圖樣式示例

2024-07-11 08:59:36

字體：大中小

來源：轉載

供稿：網友

思維導圖又稱之為腦圖

他大概是這個樣子滴：

網上大部分實現有用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</h1>                        </div>                        <div class="mainBody">                            <h1>node4</h1>                        </div>                    </div>                </div>                <div class="mainBody">                    <h1>node3</h1>                </div>                <div class="mainBody">                    <h1>node3</h1>                </div>            </div>        </div>        <div class="mainBody"><h1>node2</h1></div>        <div class="mainBody"><h1>node2</h1></div>    </div></div>

css3代碼

.mainBody{    display: -webkit-flex; /* Safari */    display: flex;    flex-direction: row;    justify-content: flex-start ;}.sbody{}.oneBody{    display: -webkit-flex; /* Safari */    display: flex;    flex-direction: column;    justify-content: space-around;}#node1{    /*height: 200px;*/    margin-top: 100px;    margin-left: 100px;}h1{    line-height: 100%;    display: -webkit-flex; /* Safari */    display: flex;    flex-direction: column;    justify-content: center;}

實際效果如圖：