css实现鼠标悬浮高亮显示组织结构图网站结构图效果代码
代码语言:html
所属分类:图表
代码描述:css实现鼠标悬浮高亮显示组织结构图网站结构图效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background:#808;} .shadow-top:after { content: " "; box-shadow: 0 0 200px 80px #0033CC; } .shadow-top:before { content: " "; box-shadow: 0 0 200px 250px #8A2BE2; } #M2010-shadow { margin:-110px; box-shadow: 0 0 150px 80px #809FFE; } .shadow1:before,.shadow1:after { z-index:-1; position:absolute; content: " "; bottom:25px; left:10px; width:50%; max-width:110px; box-shadow: 0 0 200px 90px #8A2BE2; -webkit-transform:rotate(-8deg); -moz-transform:rotate(-8deg); -o-transform:rotate(-8deg); -ms-transform:rotate(-8deg); transform:rotate(-8deg); } .shadow1:after { -webkit-transform:rotate(8deg); -moz-transform:rotate(8deg); -o-transform:rotate(8deg); -ms-transform:rotate(8deg); transform:rotate(8deg); right:10px; left:auto; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } * { position: relative; margin: 0; padding: 0; border: 0 none; -webkit-transition: all ease .4s; -moz-transition: all ease .4s; transition: all ease .4s; } html, body { width: 100%; height: 100%; background: RGBA(0, 58, 97, 1); font-family: 'Fjalla One', sans-serif; font-size: 18px; } h1 { padding-top: 40px; color: #ccc; text-align: center; font-size: 1.8rem; text-shadow: rgba(0,0,0,0.6) 1px 0, rgba(0,0,0,0.6) 1px 0, rgba(0,0,0,0.6) 0 1px, rgba(0,0,0,0.6) 0 1px; } .nav { margin: 20px auto; width: 455px; min-height: auto; } .nav ul { position: relative; padding-top: 20px; } .nav li { position: relative; padding: 20px 3px 0 3px; float: left; text-align: center; list-style-type: none; } .nav li::before, .nav li::after{ content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: 20px; border-top: 1px solid #ccc; } .nav li::after{ left: 50%; right: auto; border-left: 1px solid #ccc; } .nav li:only-child::after, .nav li:only-child::before { content: ''; display: none; } .nav li:only-child{ padding-top: 0;} .nav li:first-child::before, .nav li:last-child::after{ border: 0 none; } .nav li:last-child::before{ border-right: 1px solid #ccc; border-radius: 0 5px 0 0; } .nav li:first-child::after{ border-radius: 5px 0 0 0; } .nav ul ul::before{ content: ''; position: absolute; top: 0; left: 50%; border-left: 1px solid #ccc; width: 0; height: 20px; } .nav li a{ display: inline-block; padding: 5px 10px; border-radius: 5px; border: 1px solid #eee; text-decoration: none; text-transform: uppercase; color: #dad; font-family: arial, verdana, tahoma; font-size: 11px; -webkit-animation: shadow 16s ease-in-out infinite; animation: shadow 16s ease-in-out infinite; -webkit-box-shadow: 0px 1px 7px 5px green; -moz-box-shadow: 0px 1px 71px 15px rgba(0,0,0,0.75); } @keyframes shadow { 0% { text-shadow: 0 0 2px #B0E0E6 , 0 0 8px #B0E0E6 , 0 0 10px #B0E0E6 , 0 0 20px #B0E0E6 , 0 0 30px #B0E0E6 , 0 0 40px #B0E0E6, 0 0 50px #B0E0E6 , 0 0 80px #B0E0E6; } 50% { text-shadow: 0 12px 7px rgba(255, 0, 0, 0.8), 0 5px 15px rgba(0, 0, 0, 0.90), 0 0 50px rgba(0, 0, 0, 0.90), 0 -10px 2px rgba(255, 0, 0, 0.8); } 100% { text-shadow: 0 0 2px #800080 , 0 0 8px #800080 , 0 0 10px #800080 , 0 0 20px #800080 , 0 0 30px #800080 , 0 0 40px #800080 , 0 0 50px #800080 , 0 0 80px #800080 ; } } .nav li a:hover, .nav li a:hover+ul li a { color: #000; background: #fff; border: 1px solid #94a0b4; } /*end*/ body{ font-family:verdana, arial; } .mejs-list li:hover { background: rgba(0, 0, 0, 0.5); cursor: pointer; } .mejs-list li.current { background: #0000FF; } .mejs-container{ margin-left:auto; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0