您现在的位置是：网站首页> 编程资料编程资料

纯css3实现思维导图样式示例css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

2021-09-04 894人已围观

简介思维导图又称之为脑图，本篇文章主要介绍了使用css3实现思维导图样式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

思维导图又称之为脑图

他大概是这个样子滴：

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

答案是肯定的下面上代码

html代码

node1
node2
node3
node4
node4
node4
node3
node3
node2
node2

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; }

实际效果如图：