CSS3实现类似结构图的效果

2024-09-05 12:18:58

字体：大中小

来源：转载

供稿：网友

用CSs3实现结构图，貌似很简单，但用传统CSS似乎无能为力的。本结构图分节点来展现某机构上下级关系图，直观清淅，研究CSS3要看下如何布局，对前端设计有帮助。而且加入了动画效果。测试请用Chrome或火狐。

?<!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS3实现结构图</title>	<style class="csscreations">* {margin: 0; padding: 0;}.tree ul {	padding-top: 20px; position: relative;	transition: all 0.5s;	-webkit-transition: all 0.5s;	-moz-transition: all 0.5s;}.tree li {	float: left; text-align: center;	list-style-type: none;	position: relative;	padding: 20px 5px 0 5px;	transition: all 0.5s;	-webkit-transition: all 0.5s;	-moz-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 none;}.tree li:last-child::before{	border-right: 1px solid #ccc;	border-radius: 0 5px 0 0;	-webkit-border-radius: 0 5px 0 0;	-moz-border-radius: 0 5px 0 0;}.tree li:first-child::after{	border-radius: 5px 0 0 0;	-webkit-border-radius: 5px 0 0 0;	-moz-border-radius: 5px 0 0 0;}.tree ul 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: 5px 10px;	text-decoration: none;	color: #666;	font-family: arial, verdana, tahoma;	font-size: 11px;	display: inline-block;	border-radius: 5px;	-webkit-border-radius: 5px;	-moz-border-radius: 5px;	transition: all 0.5s;	-webkit-transition: all 0.5s;	-moz-transition: all 0.5s;}.tree li a:hover, .tree li a:hover+ul li a {	background: #c8e4f8; color: #000; border: 1px solid #94a0b4;}.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;}</style></head><body><div class="tree"><ul>	<li>杭州市		<ul>		<li>市政府		<ul>			<li>政府办</li>		</ul>		</li>		<li>市委				<ul>				<li>秘书处</li>				<li>市委办				<ul>					<li>统战部</li>					<li>宣传部</li>					<li>组织部</li>				</ul>				</li>				<li>其它机构</li>			</ul>		</li>	</ul></li></ul></div></body></html>

上一篇：用HTML5 Canvas勾画简单流程图示例

下一篇：CSS3 生成ICO图标，很逼真

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注