Pure CSS3 mind map style example
|
Mind Map He probably looks like this:
Most of the implementations on the Internet are implemented using d3.js, and some are implemented manually using svg. Recently, my work requires it, and I am very lazy, so I am wondering if it can be implemented using CSS3? The answer is yes. Here is the code HTML code
<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 code
.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;
}The actual effect is as shown below:
Oh, it's a bit crude... But you can do whatever you want with the style. To add nodes, you only need to add the corresponding node code in HTML. The height and position are adaptive. Thanks to CSS3 flex, you are lucky to live in this era. The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: Detailed explanation of the process of building Prometheus+Grafana based on docker
Recommend
Several ways to improve the readability of web pages
1. Use contrasting colours. The contrast here ref...
Solution for Docker Swarm external verification load balancing not taking effect
Problem Description I created three virtual machi...
Vue implements two-way data binding
This article example shares the specific code of ...
Solutions for building ping and nfs in embedded Linux development environment
1. Embedded Software Level 1) Bootloader->Boot...
HTML Tutorial: Unordered List
<br />Original text: http://andymao.com/andy...
Detailed explanation of the difference between MySQL normal index and unique index
Table of contents 1 Conceptual distinction 2 Case...
How to use VLAN tagged Ethernet card in CentOS/RHEL system
In some scenarios, we want to assign multiple IPs...
An article to help you understand jQuery animation
Table of contents 1. Control the display and hidi...
Five things a good user experience designer should do well (picture and text)
This article is translated from the blog Usability...
How to use the Marquee tag in XHTML code
In the forum, I saw netizen jeanjean20 mentioned h...
Vue implements multiple ideas for theme switching
Table of contents Dynamically change themes The f...
6 ways to implement the maximum and minimum values of an array in javascript
Given an array [1,8,5,4,3,9,2], write an algorith...
JavaScript Canvas draws dynamic wireframe effect
This article shares the specific code of JavaScri...
Vue achieves seamless carousel effect (marquee)
This article example shares the specific code of ...
CSS list sliding to prevent being covered by the bottom and adapt to the longer screen model processing
1. When the mobile terminal processes the list sl...