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   id="iwvjtn8m0"   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圖標，很逼真