html5 css3 实现二叉树,使用CSS3实现的二叉树形电影族谱图

CSS

语言：

CSSSCSS

确定

@import url("https://fonts.googleapis.com/css?family=Oxygen");

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

background: -webkit-linear-gradient(#052e13, #5c5c0a);

background: linear-gradient(#052e13, #5c5c0a);

min-height: 100vh;

font-family: Oxygen, sans-serif;

}

#container {

margin: 0 auto;

width: 800px;

}

.tree {

width: 100%;

}

.tree time {

display: block;

font-size: .9rem;

margin-top: .5rem;

}

.tree img {

display: block;

margin: 0 auto;

margin-bottom: 1rem;

width: 150px;

}

.tree time:before {

content: "(";

}

.tree time:after {

content: ")";

}

.tree,

.tree ul {

padding-top: 20px;

position: relative;

-webkit-transition: all 0.5s;

transition: all 0.5s;

}

.tree li {

float: left;

text-align: center;

list-style-type: none;

position: relative;

padding: 20px 5px 0 5px;

-webkit-transition: all 0.5s;

transition: all 0.5s;

}

.tree li::before,

.tree li::after {

content: '';

position: absolute;

top: 0;

right: 50%;

border-top: 1px solid #ccc;

width: 50%;

height: 20px;

}

.tree li::after {

right: auto;

left: 50%;

border-left: 1px solid #ccc;

}

.tree li:only-child::after,

.tree li:only-child::before {

display: none;

}

.tree li:only-child {

padding-top: 0;

}

.tree li:first-child::before,

.tree li:last-child::after {

border: 0;

}

.tree li:last-child::before {

border-right: 1px solid #ccc;

border-radius: 0 5px 0 0;

}

.tree li:first-child::after {

border-radius: 5px 0 0 0;

}

.tree ul::before {

content: '';

position: absolute;

top: 0;

left: 50%;

border-left: 1px solid #ccc;

width: 0;

height: 20px;

}

.tree li a {

border: 1px solid #ccc;

padding: 10px;

text-decoration: none;

width: -webkit-min-content;

width: -moz-min-content;

width: min-content;

color: #666;

font-size: 1rem;

display: inline-block;

border-radius: 5px;

-webkit-transition: all 0.5s;

transition: all 0.5s;

}

.tree li a {

background: #060504;

}

.tree li a:hover,

.tree li a:hover + ul li a {

background: #052e13;

border: 1px solid #94a0b4;

color: #fff;

}

.tree li a:hover + ul li::after,

.tree li a:hover + ul li::before,

.tree li a:hover + ul::before,

.tree li a:hover + ul ul::before {

border-color: #94a0b4;

}

@media all and (max-width: 1475px) {

.tree {

width: 100%;

}

}

@media all and (max-width: 875px) {

#container {

width: 600px;

}

.tree img {

width: 100px;

}

}

@media all and (max-width: 575px) {

#container {

width: 570px;

}

.tree img {

display: none;

}

.tree li a {

width: 110px;

}

}

@media all and (max-width: 500px) {

.tree time {

display: inline-block;

}

.tree li {

float: none;

text-align: left;

}

.tree li a {

border: initial;

width: initial;

}

.tree ul::before,

.tree li::before,

.tree li::after {

content: none;

}

}