纯css3实现思维导图样式示例

  发布时间:2018-11-01 15:25:32   作者:小米前端技术博客   我要评论

思维导图又称之为脑图,本篇文章主要介绍了使用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</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;
}

实际效果如图:

哦有点简陋····不过样式什么的你想怎么搞就怎么搞喽,其中节点的增加,你只需要html中增加相应的节点代码就行,高度位置都是自适应的,感谢css3的 flex,你们活在这个时代是幸福的

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • CSS3 Flex 弹性布局实例代码详解

    这篇文章主要介绍了CSS3 Flex 弹性布局实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-11-01
  • CSS3 创建网页动画实现弹跳球动效果

    这篇文章主要介绍了CSS3 创建网页动画实现弹跳球动效果,需要的朋友可以参考下
    2018-10-30
  • css3实现椭圆轨迹旋转的示例代码

    这篇文章主要介绍了css3实现椭圆轨迹旋转的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-29
  • css3绘制百度的小度熊

    本文通过实例代码给大家分享基于css3绘制百度的小度熊,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-10-29
  • 详解css3 mask遮罩实现一些特效

    遮罩mask的功能就是使用透明的图片或渐变遮罩元素的背景。这篇文章主要介绍了详解css3 mask遮罩实现一些特效,详细的介绍了mask的属性以及一些常用示例,感兴趣的小伙伴们
    2018-10-24
  • 纯css3实现宠物小鸡实例代码

    最近看了很多关于css3的知识和文章,觉得css3用起来很方便,使用css3的话,在页面布局上可以省去很多不必要的代码。下面小编给大家带来了纯css3实现宠物小鸡的相关知识,感
    2018-10-08
  • 使用纯 CSS 创作一个脉动 loader效果的源码

    这篇文章主要介绍了使用纯 CSS 创作一个脉动 loader效果的源码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-28
  • 基于CSS3实现的几个小loading效果

    这篇文章主要介绍了CSS3实现的几个小loading效果 ,需要的朋友可以参考下
    2018-09-27
  • CSS3 background-image颜色渐变的实现代码

    这篇文章主要介绍了CSS3 background-image颜色渐变的实现代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-13
  • 微信小程序实现可实时改变转速的css3旋转动画实例代码

    这篇文章主要给大家介绍了关于微信小程序如何实现可实时改变转速的css3旋转动画的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值
    2018-09-11

最新评论