css滑动门技术

这好像是从经典里面copy下来的。

css代码

body{
     margin:0px;
     padding:0px;
     text-align:center;
     }
#navigation {
  background:#99CCFF;
  width:715px;
  margin:30px auto;
  height:38px;
/* hide overflow:hidden from IE5/Mac */
/* /*/
overflow: hidden;
/* */
}

#navigation ul {
  margin:0;
  padding:0;
  list-style-type:none;
  background:transparent;
  }
#navigation li {
  display:block;
  float:left;
  margin:0 1px;
  }
.snazzy {
  background:transparent;
  }
.snazzy span {
  text-align:center;
  color:#fff;
  margin:0;
  font-weight:normal;
  }
.b1, .b2, .b3, .b4 {
  display:block;
  font-size:1px;
/* hide overflow:hidden from IE5/Mac */
/* /*/
overflow: hidden;
/* */
}
.b1, .b2, .b3 {
  height:1px;
  }
.b2, .b3, .b4 {
  border-left:1px solid #fff;
  border-right:1px solid #fff;
  }
.b1 {
  margin:0 5px;
  background:#fff;
  }
.b2 {
  margin:0 3px;
  border-width:0 2px;
  }
.b3 {
  margin:0 2px;
  }
.b4 {
  height:2px;
  margin:0 1px;
  }
  .boxcontent {
  display:block;
  border-left:1px solid #fff;
  border-right:1px solid #fff;
  }

a.menu, a.menu:visited {
	display:block;
	text-decoration:none;
	width:100px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
  }

a.current span, a.current:visited span {
  padding-top:10px;
  }

a.menu:hover {
  background:transparent;
  cursor:pointer;
  }

a.current:hover {
  cursor:default;
  }

a.menu:hover span {
  padding-top:10px;
  }


.red {background:#c00;}
.orange {background:#f90;}
.yellow {background:#b8b800;}
.green {background:#090;}
.blue {background:#00c;}
.indigo {background:#309;}
.violet {background:#c6c;}
.lace {background:#e0e0d5;}
.slate {background:#bcdae9;}
.salmon {background:#ffa07a;}
.mint {background:#f5fffa;}
#back{
      margin:100px auto;
      padding:0px;
      width:100px;
      background:#6cf;
      height:20px;
      overflow:hidden;
      }
#back a:link,#back a:visited{
      font-size:14px;
      color:red;
      text-decoration:none;
      }
#back a:hover{
      text-decoration:underline;
      }

html

<body>
<div id="navigation">
<ul>
<li><a class="menu" title="AccessKey: a" accessKey="a" href="#"><b class="snazzy"><span class="boxcontent red">Demos</span> <b class="b4 red"></b><b class="b3 red"></b><b class="b2 red"></b><b class="b1"></b></b></a></li>
<li><a class="menu" title="AccessKey: b" accessKey="b" href="#"><b class="snazzy"><span class="boxcontent orange">Menus</span> <b class="b4 orange"></b><b class="b3 orange"></b><b class="b2 orange"></b><b class="b1"></b></b></a></li>
<li><a class="menu current" title="AccessKey: c" accessKey="c" href="#"><b class=snazzy><span class="boxcontent yellow">Layouts</span> <b class="b4 yellow"></b><b class="b3 yellow"></b><b class="b2 yellow"></b><b class="b1"></b></b></a></li>
<li><a class="menu" title="AccessKey: d" accessKey="d "href="#"><b class="snazzy"><span class="boxcontent green">Boxes</span> <b class="b4 green"></b><b class="b3 green"></b><b class="b2 green"></b><b class="b1"></b></b></a></li>
<li><a class="menu" title="AccessKey: e" accessKey="e" href="#"><b class="snazzy"><span class="boxcontent blue">Mozilla</span> <b class="b4 blue"></b><b class="b3 blue"></b><b class="b2 blue"></b><b class=b1></b></b></a></li>
<li><a class="menu" title="AccessKey: f" accessKey="f" href="#"><b class="snazzy"><span class="boxcontent indigo">Explorer</span> <b class="b4 indigo"></b><b class="b3 indigo"></b><b class="b2 indigo"></b><b class="b1"></b></b></a></li>
<li><a class="menu" title="AccessKey: g" accessKey="g" href="#"><b class="snazzy"><span class="boxcontent violet">Opacity</span> <b class="b4 violet"></b><b class="b3 violet"></b><b class="b2 violet"></b><b class="b1"></b></b></a></li>
</ul>
</div>

效果如图,有兴趣的朋友还是把代码copy一下吧,这烂blog也太烂了,应该有运行代码的功能啊~~~~强烈建议增加此功能!!

原始的个站转移了

你可能感兴趣的:(css滑动门技术)